Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Working with Advanced HTML5 – Part 4

Thursday, March 6th, 2014 by Servage

Compositing on the Canvas

Compositing refers to how finely we can control the transparency and layering effects of objects as we draw them to the canvas. There are two attributes we can use to control Canvas compositing operations: globalAlpha and globalCompositeOperation.

globalAlpha

The globalAlpha Canvas property defaults to 1.0 (completely opaque) and can be set from 0.0 (completely transparent) through 1.0. This Canvas property must be set before a shape is drawn to the canvas.

globalCompositeOperation

The globalCompositeOperation value controls how shapes are drawn into the current Canvas bitmap after both globalAlpha and any transformations have been applied.

In the following list, the “source” is the shape we are about to draw to the canvas, and the “destination” refers to the current bitmap displayed on the canvas:

copy

Where they overlap, displays the source and not the destination.

destination-atop

Destination atop the source. Where the source and destination overlap and both are opaque, displays the destination image. Displays the source image wherever the source image is opaque but the destination image is transparent. Displays transparency elsewhere.

destination-in

Destination in the source. Displays the destination image wherever both the destination image and source image are opaque. Displays transparency elsewhere.

destination-out                                                                                                                                                   

Destination out source. Displays the destination image wherever the destination image is opaque and the source image is transparent. Displays transparency elsewhere.

destination-over

Destination over the source. Displays the destination image wherever the destination image is opaque. Displays the source image elsewhere.

lighter

Source plus destination. Displays the sum of the source image and destination image, with color values approaching 1.0 as a limit.

source-atop

Source atop the destination. Displays the source image wherever both images are opaque. Displays the destination image wherever the destination image is opaque but the source image is transparent. Displays transparency elsewhere.

source-in

Source in the destination. Displays the source image wherever both the source image and destination image are opaque. Displays transparency elsewhere.

source-out

Source out destination. Displays the source image wherever the source image is opaque and the destination image is transparent. Displays transparency elsewhere.

source-over

(Default.) Source over destination. Displays the source image wherever the source image is opaque. Displays the destination image elsewhere.

xor

Source xor destination. Exclusive OR of the source image and destination image.

This example shows how some of these values can affect how shapes are drawn to the canvas, producing the given output.

Canvas compositing example

function drawScreen() {
//draw a big box on the screen
context.fillStyle = "black"; //
context.fillRect(10, 10, 200, 200);
//leave globalCompositeOperation as is
//now draw a red square
context.fillStyle = "red";
context.fillRect(1, 1, 50, 50);
//now set it to source-over
context.globalCompositeOperation = "source-over";
//draw a red square next to the other one
context.fillRect(60, 1, 50, 50); //now set to destination-atop
context.globalCompositeOperation = "destination-atop";
context.fillRect(1, 60, 50, 50);
//now set globalAlpha
context.globalAlpha = .5;
//now set to source-atop
context.globalCompositeOperation = "source-atop";
context.fillRect(60, 60, 50, 50);
}

dfgdr

As you can see in this example, we have toyed a little with both the globalCompositeOperation and the globalAlpha Canvas properties. When we assign the string source-over, we are essentially resetting the globalCompositeOperation back to the default. We then create some red squares to demonstrate a few of the various compositing options and combinations. Notice that destination-atop switches the newly drawn shapes under the current Canvas bitmap and that the globalAlpha property affects only shapes that are drawn after it is set. This means that we don’t have to use the save() and restore() functions for the Canvas state to set the next drawn shape to a new transparency value.

Sources for further reading

Working with Advanced HTML5 - Part 4, 5.0 out of 5 based on 1 rating
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.