Why are we offseting the pixels by 4 when updating colors?

Question

var canvas = document.getElementById("canvas");
var canvas_context = canvas.getContext("2d");
var canvas_buffer = canvas_context.getImageData(0, 0, canvas.width, 
canvas.height);
var canvas_pitch = canvas_buffer.width * 4;

console.log(canvas_buffer);
var PutPixel = function(x, y, color) {
  x = canvas.width/2 + (x | 0);
  y = canvas.height/2 - (y | 0) - 1;

  if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
    return;
  }

  var offset = 4*x + canvas_pitch*y;
  canvas_buffer.data[offset++] = color[0];
  canvas_buffer.data[offset++] = color[1];
  canvas_buffer.data[offset++] = color[2];
  canvas_buffer.data[offset++] = 255; // Alpha = 255 (full opacity)
}

Here in the code I have found it goes into canvas.buffer.data does the offset and inserts the color and that is what I am confused about. Where does that come from?

I did get to the point where on a Canvas 600x600 = 360000 *4 = 1440000 bytes