<html>
<body onload="func()">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;" onmousemove="func1()" onclick="func()">
</canvas>
<script>
var arraycolor = [];
function func(){
for (var i = 0; i < 62500; i++){
arraycolor.push("#"+((1<<24)*Math.random()|0).toString(16));
}
}
function func1(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 500,500);
var counter = 0;
for (var it_1 = 0; it_1 < 2500;it_1+=50)
{
for (var it_2 = 0; it_2 < 2500;it_2+=50)
{
var mouseX = event.pageX;
var mouseY = event.pageY;
if (mouseX > it_1 && mouseX < it_1+50 && (mouseY > it_2 && mouseY<it_2+50) )
{
ctx.strokeStyle = "blue";
ctx.strokeRect(it_1,it_2, 50,50);
}
ctx.fillStyle = arraycolor[counter];
ctx.fillRect(it_1,it_2,40,40);
counter++;
}
}
}
</script>
</body>
</html>
| 