Capabilities of the Canvas

Canvas lets you programmatically draw onto your webpage:

• Images,
• Texts,
• Lines and Curves.

Canvas drawings can be extensively styled:

• stroke width,
• stroke color,
• shape fill color,
• opacity,
• shadowing,
• linear gradients and radial gradients,
• font face,
• font size,
• text alignment,
• text may be stroked, filled or both stroked & filled,
• image resizing,
• image cropping,
• compositing

Uses of the Canvas

Drawings can be combined and positioned anywhere on the canvas so it can be used to create:

• Paint / Sketch applications,
• Fast paced interactive games,
• Data analyses like charts, graphs,
• Photoshop-like imaging,
• Flash-like advertising and Flashy web content.

Canvas allows you to manipulate the Red, Green, Blue & Alpha component colors of images. This allows canvas to manipulate images with results similar to Photoshop.

• Recolor any part of an image at the pixel level (if you use HSL you can even recolor an image while retaining the important Lighting & Saturation so the result doesn’t look like someone slapped paint on the image),
• “Knockout” the background around a person/item in an image,
• Detect and Floodfill part of an image (eg, change the color of a user-clicked flower petal from green to yellow – just that clicked petal!),
• Do Perspective warping (e.g. wrap an image around the curve of a cup),
• Examine an image for content (eg. facial recognition),
• Answer questions about an image: Is there a car parked in this image of my parking spot?,
• Apply standard image filters (grayscale, sepia, etc)
• Apply any exotic image filter you can dream up (Sobel Edge Detection),
• Combine images. If dear Grandma Sue couldn’t make it to the family reunion, just “photoshop” her into the reunion image. Don’t like Cousin Phil – just “photoshop him out,
• Play a video / Grab a frame from a video,
• Export the canvas content as a .jpg | .png image (you can even optionally crop or annotate the image and export the result as a new image),

About moving and editing canvas drawings (for example to create an action game):

• After something has been drawn on the canvas, that existing drawing cannot be moved or edited. This common misconception that canvas drawings are movable is worth clarifying: Existing canvas drawings cannot be edited or moved!
• Canvas draws very, very quickly. Canvas can draw hundreds of images, texts, lines & curves in a fraction of a second. It uses the GPU when available to speed up drawing.
• Canvas creates the illusion of motion by quickly and repeatedly drawing something and then redrawing it in a new position. Like television, this constant redrawing gives the eye the illusion of motion.

Feedback about page:

Feedback:

Optional: your email if you want me to get back to you:

Send Feedback Cancel

---