Canvas 2D pixel rendering performance tests

Each render test is performed once on a hidden canvas with a size of 1024x1024 pixel.

Method avg. rendering time (ms) ~fps  
Random color fill with fillRect()

Fills the canvas with random colors computed during rendering using the contexts fillRect() method.


function renderRandomFillRect( ctx, canvasDimension, params ){
  for(var x = 0; x < canvasDimension.width; x++){
    for(var y = 0; y < canvasDimension.width; y++){
      ctx.fillStyle = toRGBAString( random(0,256), random(0,256), random(0,256), 1 );
      ctx.fillRect( x, y, 1, 1);
    }
  }
}
n/a n/a
Random color fill with imagedata

Fills the canvas with random colors computed during rendering using the contexts putImageData() method.


function renderRandomImageData( ctx, canvasDimension, params ){
  var imageData = ctx.getImageData( 0, 0, canvasDimension.width, canvasDimension.height );
  var rawData = imageData.data;
  var totalPixels = canvasDimension.width * canvasDimension.height;
  var index = 0;
  for( var pixelIndex = 0; pixelIndex < totalPixels; pixelIndex++ ){
    rawData[index++] = random( 0, 256 );
    rawData[index++] = random( 0, 256 );
    rawData[index++] = random( 0, 256 );
    rawData[index++] = 256;
  }
  ctx.putImageData(imageData, 0, 0);
}
n/a n/a
Precomputed random color fill with fillRect()

function renderPrecomputed2DFillRect( ctx, canvasDimension, params ){
  for(var x = 0; x < canvasDimension.width; x++){
    for(var y = 0; y < canvasDimension.height; y++){
      ctx.fillStyle = toRGBAString( params[x][y].r, params[x][y].g, params[x][y].b, params[x][y].a );
      ctx.fillRect( x, y, 1, 1);
    }
  }
}
n/a n/a
Precomputed random color fill with imagedata

function renderPrecomputed2DImageData( ctx, canvasDimension, params ){
  var imageData = ctx.getImageData( 0, 0, canvasDimension.width, canvasDimension.height );
  var rawData = imageData.data;
  var totalPixels = canvasDimension.width * canvasDimension.height;
  var index = 0;
  
  for(var y = 0; y < canvasDimension.height; y++){
    for(var x = 0; x < canvasDimension.width; x++){
      rawData[index++] = params[x][y].r;
      rawData[index++] = params[x][y].g;
      rawData[index++] = params[x][y].b;
      rawData[index++] = params[x][y].a;
    }
  }
  ctx.putImageData(imageData, 0, 0);
}
n/a n/a
Precomputed seqential random color fill with fillRect()

function renderPrecomputedSeqFillRect( ctx, canvasDimension, params ){
  var index = 0;
  for(var y = 0; y < canvasDimension.height; y++){
    for(var x = 0; x < canvasDimension.width; x++){
      ctx.fillStyle = toRGBAString( params[index++], params[index++], params[index++], params[index++] );
      ctx.fillRect( x, y, 1, 1);
    }
  }
}
n/a n/a
Precomputed sequential random color fill with imagedata

function renderPrecomputedSeqImageData( ctx, canvasDimension, params ){
  var imageData = ctx.getImageData( 0, 0, canvasDimension.width, canvasDimension.height );
  imageData.data = params;
  ctx.putImageData(imageData, 0, 0);
}
n/a n/a