Untitled

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
        <title>Curvas de Bézier</title>
    </head>

    <body onLoad = init()>

        <style>body{font-family: 'Roboto';}</style>

        <h1>Curvas mt loucas</h1>
         <canvas id="myCanvas" width="1000" height="500" style="border:3px solid #000000; background-color:rgb(143, 143, 143);"></canvas></canvas>
        <br>


        <button onclick = "newCurve()">Nova curva</button>
        <button onclick = "buttonNotReady()">Deletar ponto</button>
        <button onclick = "nextCurve()">Próxima</button>
        <button onclick = "previousCurve()">Anterior</button>

        <form>
            Quantidade de retas:
            <input type="number" name="numeroAvaliacoes" value="1" style="width: 40px">
         </form>


        <script>
            //Variaveis globais para todo o codigo
            var canvas, context, curvesArrayX, curvesArrayY, currentCurve, amountCurves;

            function init(){
                curvesArrayX = [];
                curvesArrayY = [];
                currentCurve = 0;
                amountCurves = 0;
                curvesArrayX[currentCurve] = [];
                curvesArrayY[currentCurve] = [];
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                canvas.addEventListener("mousedown", drawPoint);
            }


            function drawPoint(event){
                console.log("Current Curve: " + currentCurve);
                console.log("Amount Curves: " + amountCurves);
                console.clear;
                //Definindo as caracteristicas do ponto
                var position = getMousePosition(event, canvas);
                var pointRadius = 3;
                context.fillStyle = "#ff2626";

                //Desenha o ponto
                context.beginPath();
                context.arc(position.x, position.y, pointRadius, 0, Math.PI * 2);
                context.fill();
                context.stroke();

                //Verifica se ja existem pontos existentes e tenta tracar uma reta
                var arraySize = curvesArrayX[currentCurve].length;
                if(arraySize >= 1){
                    drawLine(position);
                }

                //Adiciona o novo ponto ao array de pontos
                curvesArrayX[currentCurve].push(position.x);
                curvesArrayY[currentCurve].push(position.y);
            }

            function getMousePosition(event, canvas) {
                var rect = canvas.getBoundingClientRect();
                return {
                    x: event.clientX - rect.left,
                    y: event.clientY - rect.top
                }
            }

            function drawLine(position){
                var arraySize = curvesArrayX[currentCurve].length;
                if(arraySize >= 1){
                    //verifica quantidade de pontos no array, antes de tentar criar uma reta
                    var lastX = curvesArrayX[currentCurve][arraySize - 1];
                    var lastY = curvesArrayY[currentCurve][arraySize - 1];
                    context.beginPath();
                    context.moveTo(lastX, lastY);
                    context.lineTo(position.x, position.y);
                    context.stroke();
                }
            }

            function drawBezierCurve(){

            }

            function newCurve(){
                amountCurves++;
                currentCurve = amountCurves;
                curvesArrayX[amountCurves] = [];
                curvesArrayY[amountCurves] = [];
            }

            function nextCurve(){
                if(currentCurve < amountCurves){
                    currentCurve++;
                }
            }

            function previousCurve(){
                if(currentCurve > 0){
                    currentCurve--;
                }
            }

           </script>

    </body>

</html>