JSFiddle - React, Tailwind, and code Playground

HTML

<img...

JavaScript

var canvas=document.querySelector("canvas");
canvas.height="200";
canvas.width="578";
var ctx=canvas.getContext("2d");
var img=document.querySelector("img");
img.style.display = "none";

//draw image on canvas
ctx.shadowColor = 'rgba(255,0,0, 1)';
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur =8;
var pattern = ctx.createPattern(img, "repeat"); 

ctx.fillStyle = pattern;
//ctx.fillRect(00, 00, 500, 501);
ctx.drawImage(img,0,0);


//clear the canvas for redrawing
//context.clearRect ( x , y , canvas.width, canvas.height );
//canvas.width = canvas.width;


//zoom image via context scale
//ctx.scale(2,2);


//redraw on canvas to show zoomed image
//ctx.drawImage(img,0,0);


//transform
//ctx.transform(1,0.5,-0.5,1,30,10);


//redraw
//ctx.drawImage(img,0,0);