Previous Next

Canvas Shadow

Shadow is used to apply shadow to shapes, images or text. Shadow takes some properties such as shadowOffsetX, shadowOffsetY, shadowBlur and shadowColor.

ShadowOffsetX

ShadowOffsetX property is used for horizontal distance (x-axis) between the shadow and shape. It creates horizontal shadow to shapes.

Syntax

var variableName = canvas.getContext(2d);
variableName.shadowOffsetX=value;

ShadowColor

ShadowColor property is used to apply color to shadow.

Syntax

var variableName = canvas.getContext(2d);
variableName.shadowColor="color";

ShadowOffsetY

ShadowOffsetY property is used for vertical distance (y-axis) between the shadow and shape. It creates vertical shadow to shapes.

Syntax

var variableName = canvas.getContext(2d);
variableName.shadowOffsetX=value;

ShadowBlur

ShadowBlur property is used to define blurness of shadow, shadow blur depends upon the blur value, higher the value, more blured the shape becomes, lower the value, the less blured the shape becomes. No blur is applied by using value as 0 (zero).

Syntax

var variableName = canvas.getContext(2d);
variableName.shadowBlur=value;

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id "Shadow" to canvas element
• Give width and height of 250 250 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid orange
• Use javascript to draw any shape or line on canvas, apply shadow properties on shape

save file with name task.html or task.htm and then open it using any browser and see results.

Previous Next