JSFiddle - React, Tailwind, and code Playground

by Jessel John

HTML

All images:
<div id="myJershy">
    <img src="http://i.imgur.com/oGvNc0L.png" id="grey" style="width:150px;" />
        <img class="orange" id="orange" src="http://i.imgur.com/EJ3W1KM.jpg" />
</div>

<hr/>
Merged image<br/><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">

JavaScript

var s=0;
$('#myJershy').children('img').each(function(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById($(this).attr('id'));
    ctx.drawImage(img,s,10,$(this).width(),$(this).height());
    s=s+$(this).width();
});