JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<canvas id="some-canvas"></canvas>

CSS

#some-canvas {
    border:1px solid black;
    margin:50px 50px;
}

JavaScript

var _self = new Object();

_self.elements = {
    canvas: {},
    context: {},
    image: {}
};

_self.CanvasImages = {
    collection: [],
    draw: function () {
        _self.elements.context.clearRect(0, 0, _self.elements.canvas.width, _self.elements.canvas.height);

        for (var i = 0; i < this.collection.length; i++) {
            this.collection[i].draw();
        }
    }
};

_self.CanvasImage = function () {
    var model = {
        rotation: 0,
        sx: 0,
        sy: 0,
        sw: 0,
        sh: 0,
        dx: 0,
        dy: 0,
        dw: 0,
        dh: 0,
        draw: function () {
            if (this.rotation != 0) {
                _self.elements.context.save();
                _self.elements.context.translate(this.dx, this.dy);
                _self.elements.context.rotate(this.rotation);
                _self.elements.context.drawImage(
                _self.elements.image, this.sx, this.sy, this.sw, this.sh, -(this.sw * 0.5), 0, this.sw, this.dh);
                _self.elements.context.restore();
            } else {
                _self.elements.context.drawImage(
                _self.elements.image, this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.sw, this.dh);
            }
        }
    }
    return model;
};

(function () {
    function addImage(img, sx, sy, sw, sh, dx, dy, dw, dh, rotation) {
        var cImg = new _self.CanvasImage();
        cImg.rotation = rotation;
        cImg.sx = sx;
        cImg.sy = sy;
        cImg.sw = sw;
        cImg.sh = sh;
        cImg.dx = dx;
        cImg.dy = dy;
        cImg.dw = dw;
        cImg.dh = dh;

        _self.elements.context.drawImage(_self.elements.image, cImg.sx, cImg.sy, cImg.sw, cImg.sh, cImg.dx, cImg.dy, cImg.dw, cImg.dh);
        _self.CanvasImages.collection.push(cImg);
    }

    function loop() {
        _self.CanvasImages.draw();
    }

    function initCanvas() {
        _self.elements.canvas = document.getElementById('some-canvas');
       ...