HTML5 canvas.getContext("2d") reference
Context
The canvas element has no drawing abilities of its own. A canvas is a rectangular area, where you can control every pixel using JavaScript. HTML5 has a built-in object for the canvas element, the getContext("2d") object. The getContext("2d") object has methods to draw lines, boxes, circles, and more.
Colors and Styles
| Attribute | Value | Description |
|---|---|---|
| fillStyle | color/style | The fill-color of the drawing, black is default |
| strokeStyle | color/style | The stroke-color of the drawing, black is default |
| lineWidth | number | The width of the drawing stroke, 1 is default |
| lineCap | butt round square | The style of the ending of the line, butt is default |
| lineJoin | bevel round miter | The style of the corners of the line, miter is default |
| miterLimit | number | The limit size of the corners in a line, default is 10 |
| shadowColor | color | The color of the shadow, black is default |
| shadowOffsetX | number | The horizontal distance of the shadow, 0 is default |
| shadowOffsetY | number | The vertical distance of the shadow, 0 is default |
| shadowBlur | number | The size of the blurring effect, 0 is default |
| Method | Description | |
| createPattern(obj,pattern) | Creates a pattern from an image to be used by the fillStyle or strokeStyle attributes | |
| createLinearGradient(x0,y0,z1,y1) | Creates a gradient object. Use this object as a value to the strokeStyle or fillStyle attributes | |
| createRadialGradient(x0,y0,r0,x1,y1,r1) | Creates a gradient object as a circle. Use this object as a value to the strokeStyle or fillStyle attributes | |
| addColorStop(position,color) | This is a method of the gradient objects above. Specifies the gradient's position and color | |
| drawCustomFocusRing(element) | ||
| drawSystemFocusRing(element) | ||
Path, Curve, Circle, and Rectangle
| Method | Description |
|---|---|
| fillRect(x,y,w,h) | Draws a filled rectangle using the color/style of the fillStyle attribute |
| strokeRect(x,y,w,h) | Draws the lines of a rectangle using the color/style of the strokeStyle attribute |
| clearRect(x,y,w,h) | Clears a rectangle area. All pixels inside this area will be erased |
| beginPath() | Starts a new path, or clears the current path |
| moveTo(x,y) | Moves the path to the specified point, without creating a line |
| closePath() | Creates a line (path) from the last point in the path, to the first point. Completes the path |
| lineTo(x,y) | Creates a line from the last point in the path to the given point |
| rect(x,y,w,h) | Creates a rectangle |
| fill() | Fills the current path with the selected color, black is default |
| stroke() | Creates a stroke/path described with the specified path methods |
| clip() | Creates an area in the canvas, and this area is the only visible area in the canvas |
| quadraticCurveTo(cpx,cpy,x,y) | Creates a quadratic Bezier curve from the current point in the path to the specified path |
| bezierCurveTo(cpx,cpy,cpx,cpy,x,y) | Creates a cubic Bezier curve from the current point in the path to the specified path |
| arc(x,y,r,sAngle,eAngle,aClockwise) | Creates a circle, or parts of a circle |
| arcTo(x1,y1,x2,y2,radius) | Creates an arc between two points |
| isPointInPath(x,y) | Returns a Boolean value, true if the specified point is in the path, otherwise false |
Transformations
| Method | Description |
|---|---|
| scale(x,y) | Scales the drawings based on the x and y parameters |
| rotate(angle) | Rotates the drawings based on the given angle |
| translate(x,y) | Moves the drawings horizontally and vertically |
| transform(a,b,c,d,e,f) | Changes the shape of the drawings based on a matrix |
| setTransform(a,b,c,d,e,f) | Clears the current transformation, then makes the changes of the drawings based on a matrix |
Text
| Attribute | Value | Description |
|---|---|---|
| font | fontproperties | Specifies font properties used for writing on the canvas |
| textAlign | start end left right center | The alignment of the text, "start" is default |
| textBaseline | alphabetic bottom hanging ideographic middle top | The vertical alignment of the text, "alphabetic" is default |
| Method | Description | |
| fillText(text,x,y,maxWidth) | Draws text on the canvas, and fills it with the color set by the fillStyle attribute | |
| strokeText(text,x,y,maxWidth) | Draws text on the canvas, without filling, using the color set by the strokeStyle attribute. | |
| measureText(text).width | Measures the given text string, returns the result in pixels | |
Images and Pixel Manipulation
| Attribute | Value | Description |
|---|---|---|
| width | number | Specifies the width of the imagedata object |
| height | number | Specifies the height of the imagedata object |
| data | array | An array containing the rgba values of all pixels in an imagedata object |
| Method | Description | |
| drawImage() | Use a picture when drawing onto the canvas | |
| createImageData() | Creates a blank imagedata object | |
| getImageData(x,y,w,h) | Creates a new imagedata object, containing data from the canvas | |
| putImageData(imgdat,dx,dy,x,y,w,h) | Draws imagedata onto th canvas | |
Compositing
| Attribute | Value | Description |
|---|---|---|
| globalAlpha | number | Specifies the transparency of the drawings |
| globalCompositeOperation
source-atop
source-in source-out source-over destination-atop destination-in destination-out destination-over lighter copy xor vendorName-operationName | Specifies how shapes and drawings are positioned onto the canvas, source-over is default | |
