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 |