(click anywhere to close)
OPEN MENU

[Canvas] Composites

category: Website | course: Canvas | difficulty:

Though the title of the chapter may be daunting, composites are a simple concept. A composite is a shape consisting of two shapes. In other words, they determine what happens when two shapes are composed together. There are four main topics: shadows, clipping, global alpha and global operations.

Shadows

Drop shadows are very popular, and can be used to add a sense of depth or detail. As always, the canvas doesn’t distinguish between different objects, which means you need to set the shadow properties before calling fill(). Four properties regarding shadows can be set:

Syntax

Possible Value

Description

shadowColor

Any colour

The colour of the shadow

shadowBlur

Positive number

How blurred the shadow is. A lower value means a sharper shadow.

shadowOffsetX

Number

Shadow offset in x-direction relative to top-left corner of shape

shadowOffsetY

Number

Shadow offset in y-direction relative to top-left corner of shape

Remember that, just like any other property, these stay in effect until you reset them or restore a canvas state.

ctx.rect(10, 10, 50, 50);

ctx.shadowColor = '#999';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

ctx.fillStyle = 'red';
ctx.fill();

Clipping

Clipping means showing only that part of a shape that’s inside another shape. To turn everything that’s inside the canvas at that certain moment into a clip path, use the clip() method. Now, everything you draw afterwards will be clipped to that path, and only the parts inside the clip path displayed. However, you probably don’t want everything to be clipped, which is why it’s wise to save the state of the canvas before calling the clip() method, and restoring the previous state when you’re done.

//Save original state of canvas
ctx.save();

//Set clip path to a circle (the path itself is not displayed)
ctx.arc(50,50,30,0,2*Math.PI,false);
ctx.clip();

//Draw a rectangle that will automatically be clipped
ctx.fillRect(30,30,50,50);

//Restore original canvas state to get us out of the clipping path
ctx.restore();

Global Alpha

You can set certain shapes to an alpha level other than 1 (fully opaque), simply by assigning it a transparent fill colour. But, you can also set the whole canvas to a certain opacity level, and everything you draw afterwards will have that alpha. To do so, set the globalAlpha property to a value between 0 and 1.

ctx.globalAlpha = 0.5;

ctx.fillRect(10,10,40,40);

ctx.arc(50,50,40,0,2*Math.PI,false);
ctx.fill();

Global Operations

Like the global alpha, we can set a global composite operation to be applied to everything from there on. Not surprisingly, the property to change is globalCompositeOperation. Lots of values for operations are available, which this image will demonstrate:

CanvasGlobalCompositeOperations
ctx.globalCompositeOperation = 'xor';

ctx.fillRect(10,10,40,40);
ctx.fillRect(40,10,40,40);
ctx.fillRect(25,30,40,40);
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)