var canvas = document.getElementById('chessLayoutCanvas'); if(!canvas || !canvas.getContext) return; var context = canvas.getContext('2d'); if(!context || !context.putImageData) return; var chessLayoutImage, width, height, cellWidth; width = canvas.width; height = canvas.height; cellWidth=20; if (context.createImageData) { chessLayoutImage = context.createImageData(width, height); } else if (context.getImageData) { chessLayoutImage = context.getImageData(0, 0, width, height); } else { chessLayoutImage = { 'width': width, 'height': height, 'data': new Array(width * height * 4) }; } var pixels = chessLayoutImage.data; var isBlack=true; for(pixelPosition = 0; pixelCount = pixels.length, pixelPosition < pixelCount ; pixelPosition+=4){ if(pixelPosition%160==0 && !(pixelPosition%(40*4*320)==0)){ isBlack= !isBlack; } if(isBlack){ pixels[pixelPosition]=0; pixels[pixelPosition+1]=0; pixels[pixelPosition+2]=0; pixels[pixelPosition+3]=255; } } context.putImageData(chessLayoutImage,0,0); context.strokeStyle='black'; context.strokeRect(0,0,320,320); context.stroke();
<canvas id="chessLayoutCanvas" width="320" height="320" > Sorry, your browser doesn't support Canvas! </canvas>