JSFiddle - React, Tailwind, and code Playground

CSS

canvas {
    border: 1px solid black;
    display: inline-block;
    margin: 10px;
}

JavaScript

var im = new Image();
im.src = "https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg";
im.onload = function () { /* first, wait until the image is loaded */
    /* create five canvases, and draw something in each */
    for (var i=1; i<=5; i++) {
	var canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	canvas.width = canvas.height = 200;
	var ctx=canvas.getContext("2d");
	var x=50, y=50; /* where to plot */
	var w=20, h=60; /* width and height of rectangle, if applicable */
	switch (i) {
	case 1:
	    /* first canvas: draw a rectangle */
	    ctx.fillRect(x, y, w, h);
	    break;
	case 2:
	    /* second canvas: draw an image, actual size, no clipping */
	    /* coordinates are where the top left of the image is plotted */
	    ctx.drawImage(im, x, y);
	    break;
	case 3:
	    /* third canvas: draw an image, scaled to rectangle */
	    ctx.drawImage(im, x, y, w, h);
	    break;
	case 4:
	    /* fourth canvas: draw an image, actual size, clipped to rectangle */
	    ctx.save();
	    ctx.rect(x, y, w, h);
	    ctx.clip();
	    ctx.drawImage(im, x, y);
	    ctx.restore();
	    break;
	case 5:
	    /* fifth canvas: draw shapes filled with a background image */
	    ctx.fillStyle = ctx.createPattern(im, 'repeat'); /* or 'no-repeat', or 'repeat-x', or 'repeat-y' */
	    /* note that the image is tiled from the top left of the canvas */
	    ctx.fillRect(x, y, w, h);

	    /* also draw a circle, why not */
	    ctx.beginPath();
	    ctx.arc(150, 150, 40, 0, Math.PI*2);
	    ctx.fill();
	    break;
	}
    }
}
im.onerror = function() { alert("failed to load image"); };