JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

HTML

<canvas id="main" ></canvas>

JavaScript

var canvas = document.getElementById("main");
var w = 640*3;
var h = 480*2;
var ctx = canvas.getContext("2d");
var firstPt = null;
var lastPt = null;
var margin = 2;
var dpi = 2;// window.devicePixelRatio;
canvas.style.width=w + "px";
canvas.style.height=h+"px";
canvas.width = w*dpi;
canvas.height= h*dpi;

document.body.addEventListener("mousedown", function (event) {
	firstPt = {x:event.clientX*dpi, y:event.clientY*dpi};
});

document.body.addEventListener("mousemove", function (event) {
  if (lastPt) {
    var w =  lastPt.x-firstPt.x;
    var h = lastPt.y-firstPt.y;
    var x = firstPt.x;
    var y = firstPt.y;
    ctx.clearRect(w < 0 ? x+w-margin : x-margin, h<0?y+h-margin:y-margin, w<0?-w+(margin<<1):w+(margin<<1), h<0?-h+(margin<<1):h+(margin<<1));
  }
  if (firstPt) {
  	var w =  event.clientX*dpi-firstPt.x;
    var h = event.clientY*dpi-firstPt.y;
    var x = firstPt.x;
    var y = firstPt.y;
    ctx.strokeRect(w < 0 ? x+w:x, h < 0 ? y+h:y, w<0?-w:w,h<0?-h:h );
    lastPt = {x:event.clientX*dpi, y:event.clientY*dpi};
  }
});
document.body.addEventListener("mouseup", function (event) {
if (firstPt && lastPt) {
		var w =  lastPt.x-firstPt.x;
    var h = lastPt.y-firstPt.y;
    var x = firstPt.x;
    var y = firstPt.y;
    ctx.clearRect(w < 0 ? x+w-margin : x-margin, h<0?y+h-margin:y-margin, w<0?-w+(margin<<1):w+(margin<<1), h<0?-h+(margin<<1):h+(margin<<1));
  }
  firstPt = null;
  lastPt = null;
});