JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<div id="jubcanvas" style="position:absolute;left:0;top:0;width:300px;height:611px;">
	<div id="normalimg" style="z-index:1">
		<img src="http://i.imgur.com/rN6Uz6S.png" width="100%" height="100%" />	
	</div>
    <div id="whitemask" style="z-index:2">
		<img src="http://i.imgur.com/o9VFdDn.png" width="100%" height="100%" />
	</div>
    
	<canvas id="jubCanvas1" class="jubcanvas" width="300" height="611" style="z-index:4"></canvas>
	<canvas id="jubCanvas2" class="jubcanvas" width="300" height="611" style="z-index:5"></canvas>
	<canvas id="jubCanvas3" class="jubcanvas" width="300" height="611" style="z-index:6"></canvas>
</div>

<div id="gridhtml" style="position:absolute;left:0;top:0;width:300px;height:611px;z-index:2">
	<div data-pos="0" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:0px;left:0px;"></div>
	<div data-pos="1" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:0px;left:150px;"></div>
	<div data-pos="2" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:203.666px;left:0px;"></div>
	<div data-pos="3" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:203.666px;left:150px;"></div>
	<div data-pos="4" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:407.333px;left:0px;"></div>
	<div data-pos="5" class="ui-droppable tempborder" style="position:absolute;width:150px;height:203.666px;top:407.333px;left:150px;"></div>
</div>

<a href="#" data-img="http://jubali.de/server/php/files/Puppy-Beagle%20%28125%29.jpg" id="link" class="link">Click</a>

CSS

.link {
    position:absolute;
    left:400px;
    top:0;
}
.tempborder {
  border: 1px solid #DDD;
}
.jubcanvas,
#normalimg,
#whitemask {
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var puppyimg = 'http://i.imgur.com/F3Uwl9Q.jpg';
var normalimg = 'http://i.imgur.com/rN6Uz6S.png';
var blankimg = 'http://i.imgur.com/YyuacGC.png';
var whiteimg = 'http://i.imgur.com/o9VFdDn.png';
var canvas = document.getElementById('jubCanvas1');
var context = canvas.getContext('2d');
var imageObj = new Image();

//imageObj.onload = function() {
//    context.drawImage(imageObj, 0, 0);
//};
//imageObj.src = normalimg;