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
3.Also, the color of the Blur is defined by the attribute shadowColor
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.
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
globalAlphaproperty definition is not affected, but subsequent drawings will have the defined alpha property.