JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Drag mouse.  Image will snap to nearest point.</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var isDown = false;
var startX;
var startY;


var points = [];
points.push({
    x: 10,
    y: 10
});
points.push({
    x: 75,
    y: 100
});
points.push({
    x: 150,
    y: 125
});
points.push({
    x: 125,
    y: 200
});

var imageX = -200;
var imageY = -200;

var img = new Image();
img.onload = start;
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";


function start() {
    drawAll();
}

function drawAll() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(points[0].x + 4, points[0].y + 4)
    for (var i = 1; i < points.length; i++) {
        var pt = points[i];
        ctx.lineTo(pt.x + 4, pt.y + 4);
    }
    ctx.stroke();
    //
    for (var i = 0; i < points.length; i++) {
        var pt = points[i];
        ctx.fillRect(pt.x, pt.y, 8, 8);

    }
    //
    ctx.drawImage(img, imageX, imageY);

}

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    // Put your mousedown stuff here
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mouseup stuff here
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mouseOut stuff here
    isDown = false;
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY...