gunner17,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var arrayOfSectors = [],
column = 5,
row = 4,
length = column * row,
sectorWidth = canvas.width / column,
sectorHeight = canvas.height / row,
randomWidth = sectorWidth - 100,
randomHeight = sectorHeight - 100;
function getPos() {
if (!arrayOfSectors.length) {
arrayOfSectors = Array.from({
length
}, (v, i) => i);
}
var i = arrayOfSectors.splice((Math.random() * arrayOfSectors.length | 0), 1)[0];
var h = i / column | 0;
var w = i % column;
var x = sectorWidth * w + Math.floor((Math.random() * randomWidth)),
y = sectorHeight * h + Math.floor((Math.random() * randomHeight));
return {x, y}
}
function draw() {
var {x, y} = getPos();
ctx.fillStyle = '#66FF00';
ctx.beginPath();
ctx.fillRect(x, y, 100, 100)
ctx.fill();
ctx.stroke();
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
draw();
window.setTimeout(loop, 1000)
}
loop()
</script>
</body>
</html>