Untitled

<html>
    <meta charset="UTF-8" http-equiv="imagetoolbar" content="no" />
    <title>me mama</title>
    <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false">
    <canvas id="screen" width="1200" height="700" style="border:1px solid"></canvas><br>
    <button type="button" id="resetar" onclick="resetarCanvas(true)">Resetar</button>
    <button type="button" id="addcurva" onclick="criarCurva()">Criar Curva</button>
    <button type="button" id="delcurva" onclick="deletarCurva()">Deletar Curva</button>
    <button type="button" id="antcurva" onclick="AlternaCurva(-1)">Curva Anterior</button>
    <button type="button" id="procurva" onclick="AlternaCurva(1)">Próxima Curva</button>
    <input type="checkbox" id="pontoview" name="scales" onclick="redesenhaTudo()" checked>
    <input type="checkbox" id="linhaview" name="scales" onclick="redesenhaTudo()"  checked>
    <input type="checkbox" id="curvaview" name="scales" onclick="redesenhaTudo()"  checked>
    <input type="text" id="interacoes">
    </body>
    <script>
    var tela = document.getElementById('screen');
    var pontoview = document.getElementById('pontoview');
    var linhaview = document.getElementById('linhaview');
    var curvaview = document.getElementById('curvaview');
    var element = [];
    var context = tela.getContext('2d');
    var curvasel = 0;
    var moveaux = false;
    var testerange = false;

    tela.addEventListener('mousedown',onClickFunction);


    function resetarCanvas(full){
        testerange = false;
        moveaux = false;

        context.clearRect(0, 0, tela.width, tela.height);
        if(full){
            element = [];
            curvasel = 0;
        }
    }

    function criarCurva(){
        curvasel=element.length;
        redesenhaTudo();

    }


    function redesenhaTudo(){
    console.log("olá")
        resetarCanvas(false);
        var color;
        for (let index = 0; index < element.length; index++) {

            if(index==curvasel){
                color = true;
            }else{
                color = false;
            }

            for (let indexin = 0; indexin < element[index].length; indexin++) {
                pointDraw(element[index][indexin].x,element[index][indexin].y,color)

                if(indexin>0){
                    lineDraw(element[index][indexin-1].x,element[index][indexin-1].y,index,indexin,color)
                }

            }

        }
    }


    function deletarCurva(){
        testerange = false;
        moveaux = false;
        element.splice(curvasel,1);
        curvasel = 0;
        redesenhaTudo();

    }


    function deletarPonto(posx,posy){
        testerange = false;
        moveaux = false;
        for (let index = 0; index < element[curvasel].length; index++) {
            var distx = Math.abs(element[curvasel][index].x - posx);
            var disty = Math.abs(element[curvasel][index].y - posy);
            if(distx <= 3.5 & disty <= 3.5 ){
                element[curvasel].splice(index,1);
                redesenhaTudo();
            }

        }

    }


    function AlternaCurva(direcao){
        testerange = false;
        moveaux = false;
    if( ( direcao==-1 & curvasel > 0 ) || ( direcao==1 & curvasel < element.length-1 )){
        curvasel = curvasel + direcao;
        redesenhaTudo();
    }

    }


    function myScript(){
        console.log("event.clientX - rect.left, event.clientY - rect.top");
    }

    function onClickFunction(event) {
        var rect = tela.getBoundingClientRect();
        var posx = event.clientX - rect.left;
        var posy = event.clientY - rect.top;

        if(1 == event.which) {
            if(!element[curvasel]){
                element[curvasel] = [];
            }
            for (let index = 0; index < element[curvasel].length; index++) {
                var distx = Math.abs(element[curvasel][index].x - posx);
                var disty = Math.abs(element[curvasel][index].y - posy);
                if(distx <= 3.5 & disty <= 3.5 ){
                    moveaux = index;
                }

            }
            tela.addEventListener("drag", myScript);

            if(moveaux!=false){

                console.log(testerange);
                if(testerange){

                    element[curvasel][moveaux] = {
                    x:posx,
                    y:posy
                    };
                    testerange = false;
                    moveaux = false;
                    redesenhaTudo();
                };
                testerange = moveaux;
            }else{
                pointDraw(posx,posy,true);
                if(element[curvasel].length>0){
                    lineDraw(posx,posy,curvasel,element[curvasel].length-1,true);
            }
            element[curvasel].push({
                    x:posx,
                    y:posy
                });
            }
        } else if(3 == event.which){
            deletarPonto(posx,posy);
            return false;
        }
}


    function pointDraw(posx,posy,color){
            if(pontoview.checked){
                context.beginPath();
                if(color){
                    context.fillStyle = "#48AF10";
                }else{
                    context.fillStyle = "#000000";
                }
                context.fillRect(posx-3.5, posy-3.5,7,7);
                context.stroke();
            }
        }


    function lineDraw(posx,posy,index,to, color){
       if(linhaview.checked){
            context.beginPath();
            context.moveTo(posx, posy);
            context.lineTo(element[index][to].x, element[index][to].y);

            if(color){
                context.strokeStyle = "#48AF10";
            }else{
                context.strokeStyle = "#000000";
            }

            context.stroke();

        }
}
    </script>
</html>