connaître la différence entre la source et la déstention dans la toile HTML5

Question

J'ai essayé le code ci-dessous de W3S et ils ont dit que rect bleu est la source et le rouge est la destination un, et j'ai besoin de savoir comment ont-ils déterminé que, est il l'ordre ou il y a autre chose ??

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

Lorsque vous utilisez compositing ...

'destination' se réfère toujours aux pixels existants sur la toile.

'source' fait toujours référence aux nouveaux pixels qui sont ajoutés au canevas. Lorsque les pixels source ont été dessinés sur le canevas, ils deviennent des pixels de destination.