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 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);
}
img.src = 'https://i.imgur.com/8VsK7gS.png';

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