const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const width = 200;

canvas.width = canvas.height = width;

const c = canvas.getContext('2d');

const pixels = c.createImageData(canvas.width, canvas.height);

const size = canvas.width * canvas.height;

let index = 0, x, y;

for (var i = 0; i < size; i++){

  x = i % width;

  y = Math.floor(i / width);

  pixels.data[index++] = x;

  pixels.data[index++] = y;

  pixels.data[index++] = width - x;

  pixels.data[index++] = 255;

}

c.putImageData(pixels, 0, 0);