Edit in JSFiddle

        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>