JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id=first ></canvas>
<canvas id=second></canvas>
<canvas id=third ></canvas>

CSS

canvas {
    display: block;
    border: 1px solid black;
}

JavaScript

var img = new Image();
img.src = "http://bombermine.ru/i/test/chrome.png";

function ctx (id) {
    return document.getElementById(id).getContext('2d');
};

img.onload = function () {  
    var
        drawCtx = ctx('first'),
        fillCtx = ctx('second'),
        translateCtx = ctx('third');
    
    drawCtx.drawImage( img, 15, 15 );
    
    fillCtx.fillStyle=fillCtx.createPattern(img, "repeat");
    fillCtx.fillRect(15, 15, 30, 30);
    
    translateCtx.fillStyle=translateCtx.createPattern(img, "repeat");
    translateCtx.translate(15, 15);
    translateCtx.fillRect(0, 0, 30, 30);
    translateCtx.translate(-15, -15);
}