JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="house" width=300 height=300></canvas>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }
        #container {
            position:relative;
        }
        #house {
            position:absolute;
            top:0;
            left:0;
        }
        #canvas {
            position:absolute;
            top:0;
            left:0;
        }

JavaScript

var house = document.getElementById("house");
        var ctxHouse = house.getContext("2d");
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var red = new Image();
        red.onload = function () {
            canvas.width = red.width;
            canvas.height = red.height;

            var houseImage = new Image();
            houseImage.onload = function () {
                house.width = houseImage.width;
                house.height = houseImage.height;
                ctxHouse.drawImage(houseImage, 0, 0);
            }
            houseImage.src = "https://dl.dropbox.com/u/1122582/stackoverflow/house.png";

            ctx.drawImage(red, 0, 0);

            var grass = new Image();
            grass.onload = function () {
                ctx.save();
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(grass, 0, 0, grass.width, grass.height, 0, 0, canvas.width, canvas.height);
                ctx.restore();
            }
            grass.src = "http://www.webdesignhot.com/wp-content/uploads/2011/01/BeautifulGreenGrassTexturePreview.jpg";

        }
        red.src = "https://dl.dropbox.com/u/1122582/stackoverflow/roof-overlay.png";