Compositing Methods in Canvas: HTML5

Advertisement:

There are 12 different compositing methods in Canvas. By default, source-over is applied for all the drawing operations on canvas.

In this video tutorial, we draw 2 rectangle and show the effects of applying different compositing methods on them.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

darker compositing method canvas html5

Demo

JavaScript file: Full code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = canvas;
 
function canvas()
{
	var myCanvas = document.getElementById("myCanvas");
 
	if( myCanvas && myCanvas.getContext("2d") ) 
	{
		var context         = myCanvas.getContext("2d");
 
		context.fillStyle   = "red";
		context.fillRect(40, 40, 250, 100);
 
  context.globalCompositeOperation  = "darker";
 
		context.fillStyle   = "blue";
		context.fillRect(80, 80, 250, 100);
 }
}

Here we’ve given a value of darker to globalCompositeOperation and the result is as shown in above image. i.e., the intersection region of the two image gets darker color.

Global Composite Operation in Canvas: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=b9FC6i8FVRg [Watch the Video In Full Screen.]



Change the value of globalCompositeOperation to see the effects, as listed in below image:

compositing methods canvas html5

There are 12 different compositing methods:
1. source-over: This is the default value. Here the new image is drawn on top of the existing elements.
2. source-in: Displays only the new element in the region where the intersection takes place.
3. source-out: New drawing shown in the area where it doesn’t overlap with the existing elements.
4. source-atop: Drawing is shown only at the place where the first/existing drawing is present.
5. lighter: The intersection region is drawn in a lighter color.
6. xor: Exclusive or composite method clears the overlapping region and displays the rest of the drawing.

7. destination-over: The older/existing elements/drawing is shown on top of the new element. That is the new element is behind the existing ones.
8. destination-in: Displays only the existing element in the region where the intersection takes place.
9. destination-out: Existing/old element/drawing shown in the area where it doesn’t overlap with the new element/image.
10. destination-atop: Drawing is shown only at the place where the new element/drawing is present.
11. darker: The intersection region is drawn in a darker color.
12. copy: older content/element/image is removed and only the new content/element is shown.

Advertisements

1 thought on “Compositing Methods in Canvas: HTML5”

Leave a Reply

Your email address will not be published. Required fields are marked *