Skip to content

Instantly share code, notes, and snippets.

@pizzapanther

pizzapanther/canvas-demo.html

Created May 30, 2018 00:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pizzapanther/2bf030b35c4d7f5b1d5d5ac84630c44d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pizzapanther/2bf030b35c4d7f5b1d5d5ac84630c44d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pizzapanther created this gist May 30, 2018.
    55 changes: 55 additions & 0 deletions canvas-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Test</title>
    </head>
    <body>
    <canvas width="400" height="400"></canvas>
    <script>
    var current;
    var past;

    function draw (past, current) {
    ctx.moveTo(past[0], past[1]);
    ctx.quadraticCurveTo(
    past[0], past[1],
    current[0], current[1]
    );

    ctx.stroke();
    ctx.closePath();
    }

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';

    var mouse_down = false;
    canvas.addEventListener('mousedown', function (event) {
    mouse_down = true;
    console.log('down', event.offsetX, event.offsetY);
    });

    canvas.addEventListener('mouseup', function (event) {
    mouse_down = false;
    past = null;
    console.log('up', event.offsetX, event.offsetY);
    });

    canvas.addEventListener('mousemove', function (event) {
    if (mouse_down) {
    current = [event.offsetX, event.offsetY];
    if (past) {
    draw(past, current);
    }
    past = [event.offsetX, event.offsetY];
    }

    if (mouse_down) {
    console.log('move', event.offsetX, event.offsetY);
    }
    });
    </script>
    </body>
    </html>