JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<canvas id="cc"></canvas>
<br />
Resized in: <span id="timer">-</span> s
<br />
<a href="https://i.imgur.com/8VsK7gS.png">Original image</a>

CSS

canvas{
    border:1px solid grey;
    max-width: 400px;
    width: 100%;
}
#timer{
  font-weight:bold;
}

JavaScript

var canvas = document.getElementById("cc");
var context= canvas.getContext("2d");
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var radius = (canvas.clientWidth + canvas.clientHeight) / 150;
var dragging = false;

var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function(){
    var W = img.width;
    var H = img.height;
    canvas.width = W;
    canvas.height = H;
    context.drawImage(img, 0, 0);  
    
    canvas.addEventListener('mousedown', engage);
    canvas.addEventListener('mousemove', putPoint);
    canvas.addEventListener('mouseup', disengage);
    document.addEventListener('mouseup', disengage);
    canvas.addEventListener('contextmenu', disengage);
}

img.src = 'https://i.imgur.com/8VsK7gS.png';

var getMouesPosition = function (e) {
    var mouseX = e.offsetX * canvas.width / canvas.clientWidth | 0;
    var mouseY = e.offsetY * canvas.height / canvas.clientHeight | 0;
    return {x: mouseX, y: mouseY};
}

var putPoint = function (e) {
    if (dragging) {
        context.lineTo(getMouesPosition(e).x, getMouesPosition(e).y);
        context.lineWidth = radius * 2;
        context.stroke();
        context.beginPath();
        context.arc(getMouesPosition(e).x, getMouesPosition(e).y, radius, 0, Math.PI * 2);
        context.fill();
        context.beginPath();
        context.moveTo(getMouesPosition(e).x, getMouesPosition(e).y);
    }
};

var engage = function (e) {
    dragging = true;
    putPoint(e);
};
var disengage = function () {
    dragging = false;
    context.beginPath();
};