PNews jun 2015 | Page 21
Tutorials Point, Simply Easy Learning
Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8
does not support canvas natively.
You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to
include this javascript as follows:
HTML5 Canvas Examples:
This tutorial covers following examples related to HTML5 element.
Examples
Description
Drawing Rectangles
Learn how to draw rectangle using HTML5 element
Drawing Paths
Learn how to make shapes using paths in HTML5
element
Drawing Lines
Learn how to draw lines using HTML5 element
Drawing Bezier
Learn how to draw bezier curve using HTML5 element
Drawing Quadratic
Learn how to draw quadratic curve using HTML5
element
Using Images
Learn how to use images with HTML5 element
Create Gradients
Learn how to create gradients using HTML5 element
Styles and Colors
Learn how to apply styles and colors using HTML5
element
Text and Fonts
Learn how to draw amazing text using different fonts and their
size.
Pattern and Shadow
Learn how to draw different patterns and drop shadows.
Canvas States
Learn how to save and restore canvas states while doing complex
drawings on a canvas.
Canvas Translation
This method is used to move the canvas and its origin to a
different point in the grid.
Canvas Rotation
This method is used to rotate the canvas around the current
origin.
Canvas Scaling
This method is used to increase or decrease the units in a canvas
grid.
Canvas Transform
These methods allow modifications directly to the transformation
matrix.
21 | P a g e
PNews jun 2015 | Page 20
PNews jun 2015 | Page 22