JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<canvas id="canvas1" width="400" height="400" style="border:2px solid red; margin-left:20px;"> </canvas>

JavaScript

var can1 = document.getElementById("canvas1");
var ctx1 = can1.getContext('2d');

var image1 = new Image();
image1.onload = function() {
	can1.width = this.width;
  can1.height = this.height;
  ctx1.drawImage(image1, 0, 0, this.width, this.height);
  can1.toDataURL(); // This Will make canvas tainted, images has to come from same domain or must have proper permissions
};

image1.src = "http://simsaw-storage-invitationaire.s3.amazonaws.com/public/54004ef42b0f90483529b01d/14464076374918025e19a1c631e2a9943d3d26680595b99a829585b389abbc06.jpg";

// Refer https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image