<canvas> globalCompositeOperation - JavaScript

Normalt når man tegner på <canvas> så tegnes der oven på det der i forvejen er tegnet.

globalCompositeOperation bruges til at bestemme hvad der skal ske med det der bliver tegnet og det der i forvejen er tegnet og kan være en af de følgende værdier.

• source-over | source-in | source-out | source-atop |
• destination-over | destination-in | destination-out | destination-atop |
• lighter | copy | xor

Standardværdien for globalCompositeOperation er source-over.

Bemærk at værdien darker som tidligere var i speficikationen er blevet fjernet.
I Firefox er der darken (med n i stedet for r).

Her er en demo fra mozilla.org hvor der først tegnes en firkant også sættes globalCompositeOperation også tegnes en cirkel delvist oven på firkanten.

Fra Firefox 20.0 kan man også bruge følgende nye værdier.

• normal | multiply | screen | overlay |
• darken | lighten |
• color-dodge | color-burn |
• hard-light | soft-light |
• difference | exclusion |
• hue | saturation | color | luminosity

Værdierne virker ikke i nogen af de andre browsere jeg har prøvet.

<CANVAS> GLOBALCOMPOSITEOPERATION DEMO

NÆSTE SIDE »»»