html tutorial - introduction of HTML5 Canvas - html5 - html code - html form
- The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
- The <canvas> element not having drawing abilities of its own. It is only a container for graphics.
- We must use a script to draw the graphics.
- The getContext() method sets an object which provides methods and properties for drawing on the canvas.
- This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles on the canvas.
Colors, Styles, and Shadows:
| Property | Description |
|---|---|
| fillStyle | Sets the color, gradient, or pattern used to fill the drawing |
| strokeStyle | Returns the color, gradient, or pattern used for strokes |
| shadowColor | Sets the color to use for shadows |
| shadowBlur | Sets the blur level for shadows |
| shadowOffsetX | Returns the horizontal distance of the shadow from the shape |
| shadowOffsetY | Sets the vertical distance of the shadow from the shape |
| Method | Description |
|---|---|
| createLinearGradient() | To use on canvas content creates a linear gradient |
| createPattern() | Repeats a particular element in the specified direction |
| createRadialGradient() | Designs a radial/circular gradient (to use on canvas content) |
| addColorStop() | Defines the colors and stop positions in a gradient object |
Line Styles:
| Property | Description |
|---|---|
| lineCap | Sets the style of the end caps for a line |
| lineJoin | Returns the type of corner created, when two lines meet |
| lineWidth | Sets width of the current line |
| miterLimit | Returns the maximum miter length |
Rectangles:
| Method | Description |
|---|---|
| rect() | Creates a rectangle |
| fillRect() | Draws a "filled" rectangle |
| strokeRect() | Draws a rectangle with no fill |
| clearRect() | Clears the particular pixels within a given rectangle |
Paths:
| Method | Description |
|---|---|
| fill() | Fills the current drawing path |
| stroke() | Actually draws the path where we have defined |
| beginPath() | Begins or resets the current path |
| moveTo() | Moves the path to the particular point in the canvas, without creating a line |
| closePath() | Creates a path from the current point back to the starting point |
| lineTo() | Adds a new point and creates a line to that point from the ending point in the canvas |
| clip() | Cuts a region of any shape and size from the original canvas |
| quadraticCurveTo() | Designs a quadratic Bézier curve |
| bezierCurveTo() | Designs a cubic Bézier curve |
| arc() | Creates an arc/curve (used to create circles, or parts of circles) |
| arcTo() | Creates an arc/curve between two tangents |
| isPointInPath() | Returns true if the particular point is in the current path, otherwise false |
Transformations:
| Method | Description |
|---|---|
| scale() | Scales the current drawing bigger or smaller |
| rotate() | Moves the current drawing |
| translate() | Remaps the (0,0) position on the canvas |
| transform() | Replaces the current transformation matrix for the drawing |
| setTransform() | Resets the current transform to the identity matrix. Then runs transform() |
Text:
| Property | Description |
|---|---|
| font | Sets the current font properties for text content |
| textAlign | Returns the current alignment for text content |
| textBaseline | Sets the current text baseline used when drawing text |
| Method | Description |
|---|---|
| fillText() | Draws "filled" text on the canvas |
| strokeText() | Draws text on the canvas with no fill |
| measureText() | Returns an object that have the width of the specified text |
Image Drawing:
| Method | Description |
|---|---|
| drawImage() | An image, canvas, or video onto the canvas will be drawn. |
Pixel Manipulation:
| Property | Description |
|---|---|
| width | Returns the ImageData object width |
| height | Returns the ImageData object height |
| data | Returns an object that have image data of a particular ImageData object |
| Method | Description |
|---|---|
| createImageData() | Creates a new, blank ImageData object |
| getImageData() | Returns an ImageData object that duplicates the pixel data for the specified rectangle on a canvas |
| putImageData() | Puts the image data from a specified ImageData object back onto the canvas |
Compositing:
| Property | Description |
|---|---|
| globalAlpha | Sets the current alpha or transparency value of the drawing |
| globalCompositeOperation | Returns how a new image are drawn onto an existing image |
Other:
| Method | Description |
|---|---|
| save() | Saves the state of the current context |
| restore() | Returns past saved path state and attributes |
| getContext() | Sets an object which provides methods and properties for drawing on the canvas. |
| toDataURL() | - |
| createEvent() | - |
Browser Support for HTML5 Canvas:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |