Checkerboard V2

by Niklas Knaack

JavaScript

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 = 3;//<-------------------------------------------------------------------
var pixelWidth = pixelSize * unit;
var pixelHeight = w * pixelWidth;

console.clear();
console.log("--> " , pixelHeight);

function checkerboard() {

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

    if ( pixelsPerLine % 2 === 0 ) {
    
    	pixelsPerLine += 2;
    
    } else {
    
    	pixelsPerLine += 3;
    
    }
    
    var lineWidth = pixelsPerLine * pixelWidth;
    
    console.log( lineWidth );
    console.log( pixelsPerLine );

    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 );