JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h4>Drag-draw lines.</h4>
<button id="save">Export Image</button>
<br>
<canvas id="canvas"></canvas>

CSS

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

JavaScript

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

var startX, startY, mouseX, mouseY;
var isDown = false;

var lines = [];

var imageOpacity = 0.33;

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/heart.jpg";

function start() {

    canvas.width = canvas.width = img.width;
    canvas.height = img.height;
    ctx.strokeStyle = "green";
    ctx.lineWidth = 3;

    $("#canvas").mousedown(function (e) {
        handleMouseDown(e);
    });
    $("#canvas").mousemove(function (e) {
        handleMouseMove(e);
    });
    $("#canvas").mouseup(function (e) {
        handleMouseUp(e);
    });
    $("#canvas").mouseout(function (e) {
        handleMouseUp(e);
    });

    // redraw the image
    drawTheImage(img, imageOpacity);

}

function drawLines(toX, toY) {
    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // redraw the image
    drawTheImage(img, imageOpacity);

    // redraw all previous lines
    for (var i = 0; i < lines.length; i++) {
        drawLine(lines[i]);
    }

    // draw the current line
    drawLine({
        x1: startX,
        y1: startY,
        x2: mouseX,
        y2: mouseY
    });
}

function drawTheImage(img, opacity) {
    ctx.globalAlpha = opacity;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 1.00;
}

function drawLine(line) {
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.stroke();
}




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

    // Put your mousedown stuff here
    startX = mouseX;
    startY = mouseY;
    isDown = true;
}

function handleMouseUp(e) {
    e.stopPropagation();
   ...