Edit in JSFiddle

var canvasWidth = 512;
var canvasHeight = 512;
var canvasBackgroundColor = { r:0, g:0, b:0, a:255 };

//---

var canvas = document.createElement( 'canvas' );
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );

var imageData = context.getImageData( 0, 0, canvasWidth, canvasHeight );
var data = imageData.data;

//---

function between( value, min, max ) {
  
  return value >= min && value <= max;

};	

var rect = {};
    rect.x = 111;
    rect.y = 90;
    rect.width = 200;
    rect.height = 200;
    rect.color = { r:255, g:255, b:255, a:255 };

for ( var i = 0, l = data.length; i < l; i += 4 ) {

  data[ i ]     = canvasBackgroundColor.r;
  data[ i + 1 ] = canvasBackgroundColor.g;
  data[ i + 2 ] = canvasBackgroundColor.b;
  data[ i + 3 ] = canvasBackgroundColor.a;

  var x = ( i / 4 ) % canvasWidth;
  var y = Math.floor( ( i / 4 ) / canvasWidth );

  if ( between( x, rect.x, rect.x + rect.width - 1 ) && between( y, rect.y, rect.y + rect.height - 1 ) ) {

    data[ i ]     = rect.color.r;
    data[ i + 1 ] = rect.color.g;
    data[ i + 2 ] = rect.color.b;
    data[ i + 3 ] = rect.color.a;

  }

}

context.putImageData( imageData, 0, 0 );