demos/bezier/deCasteljau.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>


  <body id="body">
    <script src="dat.gui.min.js"></script>
    <canvas id="bezier-canvas" width="1000" height="500"></canvas>
    <script src="bezier.js"></script>


    <script>
        window.onload = function()
        {
            canvas      = document.getElementById("bezier-canvas");
            ctx         = canvas.getContext("2d", { premultipliedAlpha: false });
            canvasScale = window.devicePixelRatio || 1;
            ctx.scale(canvasScale, canvasScale);
            targetWidth = 1000;

            if (window.PointerEvent)
            {
                canvas.onpointerdown = DragStart;
                canvas.onpointermove = Dragging;
                canvas.onpointerup   = DragEnd;
                canvas.onpointerout  = DragEnd;
            }
            else
            {
                canvas.onmousedown = DragStart;
                canvas.onmousemove = Dragging;
                canvas.onmouseup   = DragEnd;
                canvas.onmouseout  = DragEnd;
            }
            window.onkeydown = KeyDown;
            window.onresize  = DrawCanvas;

            DeCasteljau = true;

            gui = new dat.GUI();
            gui.add(this, 't', 0.0, 1.0).onChange(DrawCanvas);

            curves = [];
            curves.push( [ [40,300], [200,100], [300,250] ] );
            curves.push( [ [500,350], [580,200], [700,170], [850,400] ] );

            DrawCanvas();
        }
    </script>

  </body>

</html>