Checkerboard V3

by Niklas Knaack

JavaScript

console.clear();

//---

var w = 512;
var h = 512;

var canvas = document.createElement( 'canvas' );
	canvas.width = w;
	canvas.height = h;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );
	context.fillStyle = '#FF0000';
	context.fillRect( 0, 0, w, h );

var imageData = context.getImageData( 0, 0, w, h );
var data = imageData.data;

//---

var colorSwitch = true;
var color1 = 0;
var color2 = 255;
var color = color1;

//---

var unit = 4;
var pixelSize = 8;//<-------------------------------------------------------------------

//---

function checkerboard() {

	var pixelWidth = pixelSize * unit;
	var pixelHeight = 0;
	var pixelsPerLine = Math.floor( ( w * unit ) / pixelWidth );

    if ( pixelsPerLine % 2 === 0 )
    	pixelsPerLine += 2;
    else
    	pixelsPerLine += 3;
    
    var lineWidth = pixelsPerLine * pixelWidth;
    
    pixelHeight = ( lineWidth / unit ) * pixelWidth;

    var valueStartIndex = w * unit;
    var valueLength = lineWidth - valueStartIndex;
    var valueEndIndex = valueStartIndex + valueLength;

	var index = 0;

    for ( var i = 0, l = lineWidth * h; i < l; i += unit ) {

        if ( i % pixelWidth === 0 )
        	colorSwitch = !colorSwitch;

        if ( i % pixelHeight === 0 ) 
        	colorSwitch = !colorSwitch;
        
        if ( colorSwitch )
        	color = color1;
        else
        	color = color2;
            
        data[ index ]     = color;
        data[ index + 1 ] = color;
        data[ index + 2 ] = color;
        data[ index + 3 ] = 255;
        
        if ( i > valueStartIndex  ) {
    
            if ( i === valueEndIndex ) {

                valueStartIndex += lineWidth;
                valueEndIndex = valueStartIndex + valueLength;

            }

        } else {

            index += 4;

        }
        
    }
    
};

checkerboard();

//---

context.putImageData( imageData, 0, 0 );