<canvas> globalCompositeOperation - JavaScript

Med JavaScript globalCompositeOperation kan man bestemme hvordan det der tegne på <canvas> skal se ud afhængig af hvad der i forvejen er tegnet på <canvas>

Introduktion

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).

Eksempler

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.











Resultatet ovenfor er skabt af følgende kode

Farver

Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Nye værdier

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.
Prøv i Firefox 20.0 og nyere
kat der sover polygon pige
Browseren understøtter ikke <canvas>
Hold markøren over knapperne for at skifte værdien af globalCompositeOperation





Resultatet ovenfor er skabt af følgende kode

<CANVAS> GLOBALCOMPOSITEOPERATION DEMO
Siden er sidst opdateret mandag 25. juni 2018