знать разные между источником и destention в холсте HTML5

Question

Я пробовал код ниже от W3S , и они сказали, что синий прямоугольник является источником, а красный - целевым, и мне нужно знать, как они определили, что это заказ или есть что-то еще ???

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

При использовании композитинга ...

'назначения' всегда относится к существующим пикселей на холсте.

«источник» всегда относится к новым пикселам, которые добавляются к холсту.

Когда пиксели источника были нарисованы на холсте, они становятся целевыми пикселями.