Search within TutorialsPark

HTML5 Canvas Effects


Use canvas properties of shadow and opacity


Canvas Shadow : shadowBlur and shadowColor

1.The Shadow effect is visible due to the blur borders around the drawing defined by property shadowBlur.

2.The degree of blurness that should appear around the drawing is defined by the property.It accepts a number. Eg context.shadowBlur=4;

3.Also, the color of the Blur is defined by the attribute shadowColor
Eg: context.shadowColor='#fa4b2a;';

Example: Canvas shadowBlur and shadowColor.

Give it a TRY! »


Shadow Offset shadowOffsetX and shadowOffsetY.

1.The shadow offset along the X axis is defined by attribute shadowoffsetX.

2.The shadow offset along the Y axis is defined by attribute shadowoffsetY.

3.It takes numbers(both +ive and -ive) as value. Eg context.shadowOffsetX=10; denotes that the shadow will be created after 10px to right of drawing.

Similarly context.shadowOffsetX=-10 will create a shadow after 10px to the left of drawing

Example: Canvas shadowOffsetX shadowOffsetY.

Give it a TRY! »

Canvas Opacity: globalAlpha.

1.The global alpha attribute enables users to create drawings with varying levels of opacity, to invoke this feature use property globalAlpha.

2.It can take values between '1 ' (completely opaque) and '0 ' (completely transparent).

Example: Canvas Global Alpha Property.

Give it a TRY! » Note-Anything on the canvas before the globalAlpha property definition is not affected, but subsequent drawings will have the defined alpha property.





Related Examples

Related Tags