JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="myCanvas" width="300" height="300"></canvas>
<canvas class="myCanvas" width="300" height="300"></canvas>
<canvas class="myCanvas" width="300" height="300"></canvas>

JavaScript

var canvases = $('.myCanvas');
$(canvases).each(function () {
    var canvas = $(this).get(0);
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.onload = function () {
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = 200;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
    };

    imageObj.src = 'http://static.adzerk.net/Advertisers/3478c54721cd466fb6f7d3afe16e97d4.gif';
});