html5-canvas Getting started with html5-canvas An index to Html5 Canvas Capabilities & Uses
Example
Capabilities of the Canvas
Canvas lets you programmatically draw onto your webpage:
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.
