JSFiddle - React, Tailwind, and code Playground

by AndrewGong

HTML

<canvas id="canvas1" width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var src="https://vignette2.wikia.nocookie.net/mint524/images/d/d7/Sky.jpg/revision/latest?cb=20160706152654.jpg"

var image = new Image();
image.onload = function(){
  ctx.drawImage(image,0,0,50,50);  
}
ctx.fillRect(50,50,50,50);
image.src = src

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);