JavaScript Canvas 2D API

Canvas API for 2D Context

This book focuses only on the 2D context of the canvas tag.

Here's the full API of methods and properties for the 2D context of the canvas.

Initialize the canvas with a 2D context:

var canvas = document.getElementById('the-canvas-id');
var context = canvas.getContext('2d');

Methods:

context.arc(x, y, radius, startAngle, endAngle, antiClickWise)

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise Optional);

context.arcTo(x1, y1, x2, y2, radius)

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

context.beginPath()

void beginPath();

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

context.clearRect(x, y, width, height)

void clearRect(in float x, in float y, in float width, in float height);

context.clip()

void clip();

context.closePath()

void closePath();

context.createImageData(width, height) || createImageData(imagedata)

ImageData createImageData(in float width, in float height); ImageData createImageData(Imagedata imagedata);

context.getImageData(x, y, width, height)

ImageData getImageData(in float x, in float y, in float width, in float height);

context.drawImage(image, a1, a2, a3, a4, a5, a6, a7, a8);

(a3 - a8 are optional)

void drawImage(in nsIDOMElement image, in float a1, in float a2, in float a3 Optional, in float a4 Optional, in float a5 Optional, in float a6 Optional, in float a7 Optional, in float a8 Optional);

context.createLinearGradient(x0, y0, x1, y1)

nsIDOMCanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

context.createPattern(image, repetition)

nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);

context.createRadialGradient(x0, y0, x1, y1, radius)

nsIDOMCanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);

context.drawCustomFocusRing(element)

boolean drawCustomFocusRing(Element element);

context.drawSystemFocusRing(element)

void drawSystemFocusRing(Element element);

context.fill()

void fill();

context.fillRect(x, y, width, height)

void fillRect(in float x, in float y, in float width, in float height);

context.fillText(text, x, y, maxWidth)

(maxWidth is optional)

void fillText(in DOMString text, in float x, in float y, in float maxWidth Optional);

context.getLineDash()

sequence getLineDash()

context.isPointInPath(x, y)

boolean isPointInPath(in float x, in float y);

context.isPointInStroke(x, y)

boolean isPointInStroke(in float x, in float y);

context.lineTo(x, y)

void lineTo(in float x, in float y);

context.measureText(text)

nsIDOMTextMetrics measureText(in DOMString text);

context.moveTo(x, y)

void moveTo(in float x, in float y);

context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

(dirty* arguments are optional)

void putImageData(in ImageData imagedata, in float dx, double dy, in float dirtyX Optional, in float dirtyYOptional, in float dirtyWidth Optional, in float dirtyHeight Optional);

context.quadraticCurveTo(cpx, cpy, x, y)

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

context.rect(x, y, width, height)

void rect(in float x, in float y, in float width, in float height);

context.save()

void save();

context.restore()

void restore();

context.rotate();

void rotate(in float angle);

context.scale(x, y)

void scale(in float x, in float y);

context.scrollPathIntoView()

void scrollPathIntoView();

context.setLineDash(segments)

void setLineDash(in sequence segments);

context.setTransform(m11, m12, m21, m22, dx, dy)

void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

context.stroke();

void stroke();

context.strokeRect(x, y, w, h)

void strokeRect(in float x, in float y, in float w, in float h);

context.strokeText(text, x, y, maxWidth)

(maxWidth is optional)

void strokeText(in DOMString text, in float x, in float y, in float maxWidth Optional);

context.transform(m11, m12, m21, m22, dx, dy)

void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);

context.translate(x, y)

void translate(in float x, in float y);

Properties:

context.canvas

Read only.

context.canvas returns the canvas element for which this drawing context was created.

context.fillStyle

Used to color the inside of shapes. Defaults to #000000 / black.

context.font

Set the font styles for the drawing context. Defaults to '10px sans-serif'.

context.globalAlpha

Used to make shapes and images transparent before they are placed on the canvas. Defaults to 1.0 (opaque).

context.globalCompositeOperation

With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.

** Possible values: **
- source-atop - source-in - source-out - source-over (default) - destination-atop - destination-in - destination-out - destination-over - lighter - darker - copy - xor

context.lineCap

This sets the style of line endings Possible values: butt, round, square. Defaults to butt.

context.lineDashOffset

Float.

This controls where a dasharray starts on a line.

context.lineJoin

Domstring.

Controls the style of corners where two lines meet.

Possible values: round, bevel, miter. Defaults to miter.

context.lineWidth

Float.

Defines the width of lines. Defaults to 1.0.

context.miterLimit

Float.

Defaults to 10.

context.shadowBlur

Float.

Defines the amount of blurring effect used. Defaults to 0.

context.shadowColor

DOMString

Color of the shadow that is created by context.shadowBlur. Defaults to fully-transparent black.

context.shadowOffsetX

Float.

Defines the horizontal offset of the shadow. Defaults to 0.

context.shadowOffsetY

Float.

Defines the vertical offset of the shadow. Defaults to 0.

context.strokeStyle

nsIVariant.

Defines the color or style used for lines around shapes. Defaults to #000000/black.

context.textAlign

DomString.

Align text that is drawn to the canvas.

Possible values: start, end, left, right or center. Defaults to start.

context.textBaseline

Defines the baseline of text drawn to the canvas.

Possible values: top, hanging, middle, alphabetic, ideographic, bottom. Defaults to alphabetic.