JSFiddle - React, Tailwind, and code Playground

HTML

<canvas contenteditable style="border:1px solid grey;" id="cc" width="200" height="200">

JavaScript

var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");

//=== Clipboard ===============================

window.addEventListener("paste", pasteHandler); //chrome
//handler
function pasteHandler(e){
	if(e.clipboardData == false) return false; //empty
    var items = e.clipboardData.items;
    if(items == undefined) return false;
    for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") == -1) continue; //not image
        var blob = items[i].getAsFile();
        var URLObj = window.URL || window.webkitURL;
        var source = URLObj.createObjectURL(blob);
        paste_createImage(source);
        }
	}
//draw pasted object
function paste_createImage(source){
	var pastedImage = new Image();
	pastedImage.onload = function(){
        ctx.drawImage(pastedImage, 0, 0);
		}
	pastedImage.src = source;
	}

//=== /Clipboard ===============================