var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

// That's how you define the value of a pixel //

function drawPixel(x, y, r, g, b, a) {
  var index = (x + y * canvasWidth) * 4;

  canvasData.data[index + 0] = r;
  canvasData.data[index + 1] = g;
  canvasData.data[index + 2] = b;
  canvasData.data[index + 3] = a;
}

// That's how you update the canvas, so that your //
// modification are taken in consideration //

function updateCanvas() {
  ctx.putImageData(canvasData, 0, 0);
}

for (var x = 0; x < canvasWidth; x++) {
  for (var y = 0; y < canvasHeight; y++) {
    drawPixel(x, y, Math.random() * 256 | 0, Math.random() * 256 | 0, Math.random() * 256 | 0)
  }
}

updateCanvas()

Test #2

Title *

Async

Code *

var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");

for (var x = 0; x < canvasWidth; x++) {
  for (var y = 0; y < canvasHeight; y++) {
    ctx.fillStyle = "rgb(" + (Math.random() * 256 | 0) + "," + (Math.random() * 256 | 0) + "," + (Math.random() * 256 | 0) + ")";
    ctx.fillRect(x, y, 1, 1);
  }
}

Test case details

Preparation Code

Test cases

Test #1

Test #2