Canvas 2D Interface Reference

interface CanvasRenderingContext2D {

// back-reference to the canvas

readonly attribute HTMLCanvasElement canvas;

// state

void save(); // push state on state stack

void restore(); // pop state stack and restore state

// transformations (default transform is the identity matrix)

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

void rotate(in double angle);

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

void transform(in double a, in double b, in double c, in double d, in double e, in double f);

void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);

// compositing

attribute double globalAlpha; // (default 1.0)

attribute DOMString globalCompositeOperation; // (default source-over)

// colors and styles

attribute any strokeStyle; // (default black)

attribute any fillStyle; // (default black)

CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);

CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);

CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);

CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

// line caps/joins

attribute double lineWidth; // (default 1)

attribute DOMString lineCap; // "butt", "round", "square" (default "butt")

attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")

attribute double miterLimit; // (default 10)

// shadows

attribute double shadowOffsetX; // (default 0)

attribute double shadowOffsetY; // (default 0)

attribute double shadowBlur; // (default 0)

attribute DOMString shadowColor; // (default transparent black)

// rects

void clearRect(in double x, in double y, in double w, in double h);

void fillRect(in double x, in double y, in double w, in double h);

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

// path API

void beginPath();

void closePath();

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

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

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

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

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

void rect(in double x, in double y, in double w, in double h);

void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);

void fill();

void stroke();

void clip();

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

// focus management

boolean drawFocusRing(in Element element, in double xCaret, in double yCaret, in optional boolean canDrawCustom);

// text

attribute DOMString font; // (default 10px sans-serif)

attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")

attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")

void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);

void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);

TextMetrics measureText(in DOMString text);

// drawing images

void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);

void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);

void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);

void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

// pixel manipulation

ImageData createImageData(in double sw, in double sh);

ImageData createImageData(in ImageData imagedata);

ImageData getImageData(in double sx, in double sy, in double sw, in double sh);

void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);

};

interface CanvasGradient {

// opaque object

void addColorStop(in double offset, in DOMString color);

};

interface CanvasPattern {

// opaque object

};

interface TextMetrics {

readonly attribute double width;

};

interface ImageData {

readonly attribute unsigned long width;

readonly attribute unsigned long height;

readonly attribute CanvasPixelArray data;

};

interface CanvasPixelArray {

readonly attribute unsigned long length;

getter octet (in unsigned long index);

setter void (in unsigned long index, in octet value);

};