JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js"></script>
<canvas id="canvas" width=800 height=600></canvas>

JavaScript

var myCanvas = $('canvas');
var penDown = false;
var zoomLevel = 1.5;
var scale = 1 / Math.pow(zoomLevel, 3);
var x1,y1,x2,y2;
myCanvas.scaleCanvas({
		layer : true,
		name : 'zoom',
		scale : zoomLevel,
	});
	myCanvas.on('mousedown', function(event){canvasMouseDown(event);});
	myCanvas.on('mousemove', function(event){canvasMouseMove(event);});
    myCanvas.on('mouseup', function(event){canvasMouseUp(event);});

myCanvas.drawLayers();
	myCanvas.restoreCanvas({
		layer : true,
		count : 1,
		name : 'restore'
	});

function canvasMouseDown(event) {
    	initSelectionRect();	
    	x1 = event.offsetX * scale;
    	y1 = event.offsetY * scale;
	console.log('x1='+x1+', y1='+y1);
    penDown=true;
};

function initSelectionRect() {
	myCanvas.addLayer({
    		type : 'rectangle',
    		name: 'selectionBox',
	    	fillStyle: "rgba(141, 193, 139,0.59)",
			strokeStyle : "rgb(49, 159, 44)",
			strokeWidth : 5,	    	
    		fromCenter: false,
			groups: ['sRect'],
			index : -1,		
	});
}

function canvasMouseMove(event) {
    if(penDown === true)
        	drawSelectionRect(event);
};

//function to update the selection rect on mousemove
function drawSelectionRect(event) { 
	
    x2 = event.offsetX * scale;
    y2 = event.offsetY * scale;
    // console.log('x2='+x2+',y2='+y2);
    var cornerRad = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)) / 10;
    console.log(cornerRad);
    // Update selection size and position
    myCanvas.setLayer('selectionBox', {
        x: x1,
        y: y1,
        width: x2 - x1,	
        height: y2 - y1,
		cornerRadius : cornerRad,
    });
    myCanvas.drawLayers();
}
function canvasMouseUp(event) {
    penDown = false;
}