JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="purple">Purple</button>
<button id="pink">Pink</button><br>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
#canvas {
    border:1px solid red;
}
button {
    display:none;
}

JavaScript

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

// image loader

var imageURLs = []; // put the paths to your images here
var imagesOK = 0;
var imgs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png");
loadAllImages();

function loadAllImages(callback) {
    for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function () {
            imagesOK++;
            if (imagesOK >= imageURLs.length) {
                $("button").show();
            }
        };
        img.onerror = function () {
            alert("image load failed:" + this.src);
        }
        img.crossOrigin = "anonymous";
        img.src = imageURLs[i];
    }
}


$("#purple").click(function () {
    draw(1);
});

$("#pink").click(function () {
    draw(2);
});

function draw(index) {
    var stone = imgs[index];
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgs[0], 0, 0, 800, 800, 0, 0, 300, 300);
    ctx.drawImage(stone, 0, 0, stone.width, stone.height, 108, 134, stone.width * 1.24, stone.height * 1.24);
}