Cover by Jeff Fulton, Steve Fulton

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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 (see the next section, Simple Canvas Transformations, for more information).

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.

Example 2-6 shows how some of these values can affect how shapes are drawn to the canvas, producing Figure 2-11.

Example 2-6. 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);

   }
Canvas compositing example

Figure 2-11. Canvas compositing example

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 only affects shapes that are drawn after it is set. This means we don’t have to save() and restore() the Canvas state to set the next drawn shape to a new transparency value.

In the next section, we will look at some transformations that affect the entire canvas. As a result, if we want to transform only the newly drawn shape, we will have to use the save() and restore() functions.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required