JSFiddle - React, Tailwind, and code Playground

by Nhat Nguyen

HTML

<canvas id="tile_canvas" class="" width="1600" height="900" style="height: 641.25px;width: 1140px; border:1px solid #d3d3d3;"></canvas>

<img class="tiles_item" src="img/tile_117.jpg">
<img class="tiles_item" src="img/tile_123.jpg">
<img class="tiles_item_wall" src="img/tile_115.jpg">
<img class="tiles_item_wall" src="img/tile_601.jpg">
<img class="tiles_item_wall" src="img/tile_608.jpg">
<img class="tiles_item_wall_right" src="img/tile_572.jpg">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
	$('.tiles_item').on('click', function(event) {
		event.preventDefault();
		/* Act on the event */
		_this = $(this);
		
		
		draw(_this[0], 80)

	});

	$('.tiles_item_wall').on('click', function(event) {
		event.preventDefault();
		/* Act on the event */
		_this = $(this);
		
		var canvas = document.getElementById("tile_canvas");
		draw_wall(_this[0], 80)
	});

	$('.tiles_item_wall_right').on('click', function(event) {
		event.preventDefault();
		/* Act on the event */
		_this = $(this);
		
		var canvas = document.getElementById("tile_canvas");
		draw_wall_right(_this[0], 80)
	});

	draw = function(img, size){
		var canvas = document.getElementById("tile_canvas");
		var tempCanvas = document.createElement("canvas"),
		tCtx = tempCanvas.getContext("2d");

		tempCanvas.width = size;
     	tempCanvas.height = size;

     	tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size);
	    var context = canvas.getContext("2d");
		context.clearRect(0, 0, canvas.width, canvas.height);
		var pat=context.createPattern(tempCanvas,"repeat");

		
		context.fillStyle = pat;
		context.fillRect(320,0,960,450);
	}

	draw_wall =  function(img, size){
		//lay canvas hien co
		var canvas = document.getElementById("tile_canvas");
		var context_wall = canvas.getContext("2d");
		

		//tao moi mot canvas tempt
		var tempCanvas_wall = document.createElement("canvas"),
		context_temp_wall =...