know the different between source and destention in canvas HTML5

Question

I tried the code below from W3S and they said that blue rect is the source and the red one is destination one , and i need to know how did they determined that , is it the order or there is something else??

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="red";
  ctx.fillRect(20,20,75,50);
  ctx.globalCompositeOperation="source-over";
  ctx.fillStyle="blue";
  ctx.fillRect(50,50,75,50);
  ctx.fillStyle="red";
  ctx.fillRect(150,20,75,50);
  ctx.globalCompositeOperation="destination-over";
  ctx.fillStyle="blue";
  ctx.fillRect(180,50,75,50); 

Answer 1

When using compositing...

'destination' always refers to existing pixels on the canvas.

'source' always refers to new pixels that are being added to the canvas.

When source pixels have been drawn to the canvas they become destination pixels.