JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="pl" manifest="stronka.appcache">
<head>
	<meta charset="utf-8">
	<script src="puzzle.js">
    </script>
</head>
<body style="background-color:#ffffff;">
	<div id="wynik" style="margin:0 auto; width:640px;">
		<p><button onclick="document.location.reload(true)" type="button">Nowa Gra!</button></p>
		<div id="result"></div>
	</div>
    <div style="margin:0 auto; width:640px; height:480px; border: 4px solid #000000;">  
		<img id="sorry" src="sorry.jpg" style="display:none;"/>  
		<canvas id="myCanvas" width="640" height="480" onclick="onCanvasClick(event);">  
		</canvas>
    </div>
</body>
</html>

CSS

CACHE MANIFEST
# 2013-05-06

CACHE:
index.html
puzzle.js
picture.jpg

JavaScript

window.onload = onReady;
		
    var can;
    var ctx;		
    var img;
    var clickX;
    var clickY;
    var selected1;
    var selected2;		
	// wielkość kafelka
    var blockSize   = 160;
    var piecesArray = new Array();
		
	function onReady()
	{
		can = document.getElementById('myCanvas');
		// zerowanie licznika kliknięć
		localStorage.clickcount=0;
		ctx        = can.getContext('2d');			
		img        = new Image();
		img.onload = onImage1Load;
		// nazwa obrazka
		img.src    = 'http://www.idletimesoftware.com/img/screenshots/hollywood-640x480.jpg';			
	}
	function onImage1Load()
	{
		var r;
		for(var i = 0; i < 4; i++)
		{
		    for(var j = 0; j < 3; j++)
		    {
		        r = new Rectangle(i * blockSize, j * blockSize, i*blockSize + blockSize, j * blockSize + blockSize);
		        piecesArray.push(r);
		    }				
		}
			
		scrambleArray(piecesArray, 30);
		drawImage();
	}

	function Rectangle(left, top, right, bottom)
	{
		this.left = left;
		this.top  = top;
		this.right = right;
		this.bottom = bottom;
			
		this.width = right - left;
		this.height = bottom - top;
	}

	function scrambleArray(ar, times)
	{
		var count = 0;
		var temp;
		var index1;
		var index2;

		while(count < times)
		{
		    index1 = Math.floor(Math.random()*piecesArray.length);
		    index2 = Math.floor(Math.random()*piecesArray.length);
				
		    temp = piecesArray[index1];
		    piecesArray[index1] = piecesArray[index2];
		    piecesArray[index2] = temp;
				
		    count++;
		}
	}

	function drawImage()
	{
		var r;
		for(var i = 0; i < 4; i++)
		{
		    for(var j = 0; j < 3; j++)
		    {
		        r = piecesArray[i*3+j];					
		        ctx.drawImage(img, r.left, r.top, r.width, r.height, i*blockSize, j*blockSize, blockSize, blockSize);
		    }
		}
	}

	function highlightRect(drawX, drawY)
	{
		ctx.beginPath();
		ctx.moveTo(drawX, drawY);
		ctx.lineTo(drawX + blockSize, drawY);
		ctx.lineTo(drawX + blockSize, drawY + blockSize);
		ctx.lineTo(drawX, drawY +...