JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<canvas id="myCanvas" width="800" height="500" title = "click and drag to add rectangles" style="border:1px solid #000000;cursor:crosshair"></canvas>

JavaScript

var CLIPBOARD = new CLIPBOARD_CLASS("myCanvas", true);

/**
 * image pasting into canvas
 * 
 * @param {string} canvas_id - canvas id
 * @param {boolean} autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) {
	var _self = this;
	var canvas = document.getElementById(canvas_id);
	var ctx = document.getElementById(canvas_id).getContext("2d");

	//handlers
	document.addEventListener('paste', function (e) { _self.paste_auto(e); }, false);

	//on paste
	this.paste_auto = function (e) {
		if (e.clipboardData) {
			var items = e.clipboardData.items;
			if (!items) return;
			
			//access data directly
			for (var i = 0; i < items.length; i++) {
				if (items[i].type.indexOf("image") !== -1) {
					//image
					var blob = items[i].getAsFile();
					var URLObj = window.URL || window.webkitURL;
					var source = URLObj.createObjectURL(blob);
					this.paste_createImage(source);
				}
			}
			e.preventDefault();
		}
	};
	//draw pasted image to canvas
	this.paste_createImage = function (source) {
		var pastedImage = new Image();
		pastedImage.onload = function () {
			if(autoresize == true){
				//resize
				canvas.width = pastedImage.width;
				canvas.height = pastedImage.height;
			}
			else{
				//clear canvas
				ctx.clearRect(0, 0, canvas.width, canvas.height);
			}
			ctx.drawImage(pastedImage, 0, 0);
		};
		pastedImage.src = source;
    
    
"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const storedRects = [];

var baseImage = ctx.getImageData(0,0,320,200);



var refresh = true;
const rect = (() => {
    var x1, y1, x2, y2;
    var show = false;
    function fix() {
        rect.x = Math.min(x1, x2);
        rect.y = Math.min(y1, y2);
        rect.w = Math.max(x1, x2) - Math.min(x1, x2);
        rect.h = Math.max(y1, y2) - Math.min(y1, y2);
    }
    function draw(ctx) { ctx.strokeRect(this.x, this.y, this.w, this.h) }
    const rect = {x :...