HTML5 Canvas–Composition - HTML 5

What is canvas composition in HTML5?

HTML5 canvas offers compositing attribute globalCompositeOperation which affects all the drawing operations.

User can draw new shapes behind existing shapes, mask off certain areas and clear sections from the canvas using globalCompositeOperation attribute as shown in the below example.

Below values can be set for globalCompositeOperation

Attribute

Description

source-over

source-over is the default setting and draws new shapes on top of the existing canvas content.

source-in

A new shape is drawn where both new shape and the destination canvas overlap and rest all is made transparent.

source-out

A new shape is drawn where it doesn't overlap with the existing canvas content.

source-atop

A new shape is drawn where it overlaps with the existing canvas content.

lighter

colour is determined by adding colour values where both shapes overlap the

xor

Shapes are made transparent where both overlap and drawn normal everywhere else.

destination-over

New shapes are drawn behind the existing canvas content.

destination-in

Existing canvas content is kept where both the new shape and existing canvas content overlap and rest all is made transparent.

destination-out

Existing content is kept where it doesn't overlap the new shape.

destination-atop

Existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

darker

Where both shapes overlap the colour is determined by subtracting color values.

Example

Below example uses globalCompositeOperation attribute to create all possible compositions

Output

composition

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics