tile spacing

by hotfeet

JavaScript

var canvas = document.createElement("canvas");
canvas.width = 480;
canvas.height = 320;			
	
//append the render canvas to the document
document.body.appendChild(canvas);
//get the drawing context of the render canvas
ctx = canvas.getContext("2d");

//ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//////
var colors = [ "blue", "green", "yellow", "red" ];
var tileSize = 16;
var gridSize = canvas.height / tileSize;
var spacing = 4;

for(var y = 0; y < gridSize; y++) {
		for(var x = 0; x < gridSize; x++) {
    		ctx.fillStyle = colors[(x + y) % colors.length];
        ctx.fillRect((x * spacing) + x * tileSize, (y * spacing) + y * tileSize, tileSize, tileSize);
    }	
}