Tutorial by Examples

This code adds outwardly increasing shadows to an image to create a "sticker" version of the image. Notes: In addition to being an ImageObject, the "img" argument can also be a Canvas element. This allows you to stickerize your own custom drawings. If you draw text on the Can...

Once shadowing is turned on, every new drawing to the canvas will be shadowed. Turn off further shadowing by setting context.shadowColor to a transparent color. // start shadowing context.shadowColor='black'; ... render some shadowed drawings ... // turn off shadowing. context.shadowColor=...

Warning! Apply shadows sparingly! Applying shadowing is expensive and is multiplicatively expensive if you apply shadowing inside an animation loop. Instead, cache a shadowed version of your image (or other drawing): At the start of your app, create a shadowed version of your image in a secon...

The traditional use of shadowing is to give 2-dimensional drawings the illusion of 3D depth. This example shows the same "button" with and without shadowing var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); document.body.appendChild(can...

Canvas does not have CSS's inner-shadow. Canvas will shadow the outside of a filled shape. Canvas will shadow both inside and outside a stroked shape. But it's easy to create inner-shadows using compositing. Strokes with an inner-shadow To create strokes with an inner-shadow, use destinat...