JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<button type="button" id='btnr1'>
Red 1
</button>
<button type="button" id='btnr2'>
Red 2
</button>
<button type="button" id='btnr3'>
Red 3
</button>
<button type="button" id='btnb1'>
Blue 1
</button>
<button type="button" id='btnb2'>
Blue 2
</button>
<button type="button" id='btnb3'>
Blue 3
</button>


<button type="button" id='btng2'>
Green2 
</button>


<canvas id="stage" width="500" height="900"></canvas>

JavaScript

////http://www.shark-factory.com.tw/images/color_system/k1/parts/1-3.png

function drawDataURIOnCanvas(strDataURI, canvas,x,y) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, x, y);
    });
    img.setAttribute("src", strDataURI);
}

var myCanvas = document.getElementById('stage');

drawDataURIOnCanvas('https://i.imgur.com/SO2IkYF.png',myCanvas,0,0)
drawDataURIOnCanvas('https://i.imgur.com/jaiwzcG.png',myCanvas,68,47)
drawDataURIOnCanvas('https://i.imgur.com/K9oNlRp.png',myCanvas,106,44)
drawDataURIOnCanvas('https://i.imgur.com/h1tstD7.png',myCanvas,210,100)

$('#btnr1').click(function(){drawDataURIOnCanvas('https://i.imgur.com/jaiwzcG.png',myCanvas,68,47)});

$('#btnr2').click(function(){drawDataURIOnCanvas('https://i.imgur.com/K9oNlRp.png',myCanvas,106,44)});

$('#btnr3').click(function(){drawDataURIOnCanvas('https://i.imgur.com/h1tstD7.png',myCanvas,210,100)});


$('#btnb1').click(function(){drawDataURIOnCanvas('https://i.imgur.com/g8kUq6h.png',myCanvas,68,47)});

$('#btnb2').click(function(){drawDataURIOnCanvas('https://i.imgur.com/3tqle0e.png',myCanvas,106,44)});

$('#btnb3').click(function(){drawDataURIOnCanvas('https://i.imgur.com/umD6tT6.png',myCanvas,210,100)});

$('#btng2').click(function(){drawDataURIOnCanvas('https://i.imgur.com/CiQPAVM.png',myCanvas,106,44)});


//

//https://i.imgur.com/h1tstD7.png