JSFiddle - React, Tailwind, and code Playground

by cs09g

HTML

<canvas id="mycanvas" width="300px" height="300px" style="border: 1px solid black"></canvas>

JavaScript

let canvas = document.getElementById("mycanvas");
let ctx = canvas.getContext("2d");

let img = new Image;
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAANCAYAAAD2bQNSAAADiklEQVRIS+VXS04bQRB91eNFlkaK2cYcILiNhMUu+ATBJwgcAMOcAHwCgzkA5gTACTC7ECTcmAPgrCJhpLAGz1RUPdP20JhvWCW9m3F19dSr9161Cd66ruglBrR7zYyD6VNj/Lh/6ZlcMVfzWhPxLoAiEQ6Y6SfAJQCLYJjcHdWmjLl5bfGf9c5SgGHfmPDFQGq9sxgB+QuzeiDnPZfDj9e6WYyQ0wGGHWNC+81aNzWQyxuz2klytpYDUF+eLQgpAEdgbufuVMMVO1jQixzhhog3BJzcLVV9ILRu5lkFTWYspwD1mdG4MPW2PazcOiJgUXFUzgIxq1tNkN2TB3AD4u3e2dqm7Jmd294E04Y04/ysXnM5QAh7Z/UtvxF+vIASEx9J3l63PvVcTgvCoFLqgrlTOO2F2QNScLoEqjHzGin0P56cr2Rj3AcSoR3HdJiyKc9MNenkGASqui6kAKxLkRTTdkxoAqxB3BAgXFEMdC669eoYhOT3x0Bw8RkQ0OvWbY1P5STHgtwtzfhdFiYg4g0QHQ8V2rmYL3O3NOXihGIxBV05RHE0JdSbnWutg6UoMr3uatkHQZgTU/A73WPZIXQn4n3XufcEQYCVs5jpizByErA0qOhNIv6U7bAtPrYfJZvD6VNjqW0ZoygsfDcjXRFh1xWcaG9ERduF+0zBsegwpeqoS6LhmILLFJiZWKllkcNrmQCgD+I9FauOO0NySF4CiiLpR0GQoMIPY2mWAmD1xEzV7GQYzJeOEFDDgeC67hI/BYIAJZJToMMJIGTZ8Tcg3DBgAqaGf8aTcvCZcF0pXbIgxrTiGOA06DNhsvZeJYcZY8K+n+c95fAmTxhUSqLXfOHH+Wh8Cgi/FnTR9wRrOOWW0Lgozq3iqJ16RNGZ3CRjzErk/Ky+Uppr7TNjCYytnqmHPgjudzFfimnPN0ZW/E2m0yRjVExVK2svJmu2D6bD1bxetg5PFBZOzGgciRQmTYfUHMU/RHPJSou5PyLH00HMMaJgX4xqvAWdgKNaYq7JiBwX1dQRBU2/ePfs613eC3Ax2/F7bxHDCNAPQPDvCcMP0N5UkA+YeE9wJ7jLCJKLUd+9ny3vdGX8SUfciHx2jwfCY8WPznhlfLY5wtjnboxfxfDB6LzlxmhZotSSuLUPwFOFCRM4pn6ASG58I0Af25PEKxNgaF4Sb8e0UuvpnuTGmF3/43+HPznMNyRecuSuAAAAAElFTkSuQmCC";
img.onload = function() {
	ctx.drawImage(img, 150, 150);
}