...
<canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). |
...
However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics. |
...
The getContext() method returns an object that 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, and more - on the canvas.
Colors, Styles, and Shadows
Property | Description |
---|
filStyle | Sets or returns the color, gradient, or pattern used to fill the drawing |
strokeStyle | Sets or returns the color, gradient, or pattern used for strokes |
shadowColor | Sets or returns the color to use for shadows |
shadowBlur | Sets or returns the blur level for shadows |
shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape |
shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape |
Method | Description |
---|
createLinearGradient() | Creates a linear gradient (to use on canvas content) |
createPattern() | Repeats a specified element in the specified direction |
createRadialGradient() | Creates a radial/circular gradient (to use on canvas content) |
addColorStop() | Specifies the colors and stop positions in a gradient object |
Line Styles
Property | Description |
---|
lineCap | Sets or returns the style of the end caps for a line |
lineJoin | Sets or returns the type of corner created, when two lines meet |
lineWidth | Sets or returns the current line width |
miterLimit | Sets or returns the maximum miter length |
Rectangles
Method | Description |
---|
rect() | Creates a rectangle |
fillRect() | Draws a "filled" rectangle |
strokeRect() | Draws a rectangle (no fill) |
clearRect() | Clears the specified pixels within a given rectangle |
Paths
Method | Description |
---|
fill() | Fills the current drawing (path) |
stroke() | Actually draws the path you have defined |
beginPath() | Begins a path, or resets the current path |
moveTo() | Moves the path to the specified 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 last specified point in the canvas |
clip() | Clips a region of any shape and size from the original canvas |
quadraticCurveTo() | Creates a quadratic Bézier curve |
bezierCurveTo() | Creates 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 specified point is in the current path, otherwise false |
Transformations
Method | Description |
---|
scale() | Scales the current drawing bigger or smaller |
rotate() | Rotates 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 or returns the current font properties for text content |
textAlign | Sets or returns the current alignment for text content |
textBaseline | Sets or returns the current text baseline used when drawing text |
Method | Description |
---|
fillText() | Draws "filled" text on the canvas |
strokeText() | Draws text on the canvas (no fill) |
measureText() | Returns an object that contains the width of the specified text |
Image Drawing
Method | Description |
---|
drawImage() | Draws an image, canvas, or video onto the canvas |
Pixel Manipulation
Property | Description |
---|
width | Returns the width of an ImageData object |
height | Returns the height of an ImageData object |
data | Returns an object that contains image data of a specified ImageData object |
Method | Description |
---|
createImageData() | Creates a new, blank ImageData object |
getImageData() | Returns an ImageData object that copies 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 or returns the current alpha or transparency value of the drawing |
globalCompositeOperation | Sets or returns how a new image are drawn onto an existing image |
Other
Method | Description |
---|
save() | Saves the state of the current context |
restore() | Returns previously saved path state and attributes |
createEvent() |
|
getContext() |
|
toDataURL() |
|