JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<canvas id="viewport" width="1000" height="1000"></canvas>

CSS

#viewport { outline: 1px solid black; }

JavaScript

/*

Resources...

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
http://diveintohtml5.info/canvas.html
http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/

*/

var loadImage = function(source) {
    var dfd = new $.Deferred(),
        image = new Image();
    
    image.src = source;
    image.onload = function() {
        dfd.resolve(image);    
    };
    
    return dfd.promise();
};

var CanvasManager = function(id) {
    this.canvas = document.getElementById(id),
    this.context = this.canvas.getContext('2d');
    this.context.save();
};

CanvasManager.prototype.drawHouse = function(source) {
    var self = this,
        dfd = new $.Deferred();

    loadImage(source).then(function(image) {
        self.context.drawImage(
            image, 0, 0, image.width, image.height, 
            0, 0, image.width, image.height
        );
        
        dfd.resolve();
    });
    
    return dfd.promise();
};

var houseUrl = "http://www.goodallhomes.com/images/uploaded/930678920820355_wellington_english_manor_(medium).jpg";

window.canvasManager = new CanvasManager('viewport');
canvasManager.drawHouse(houseUrl).then(function() {
    canvasManager.context.globalAlpha = 0.5;                       
    canvasManager.context.fillStyle = "rgba(225, 0, 0, 0.5)";
    canvasManager.context.fillRect(400, 330, 220, 310);
});