CanvasRenderingContext2D

  • Revision slug: DOM/CanvasRenderingContext2D
  • Revision title: CanvasRenderingContext2D
  • Revision id: 18420
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment drawFocusRing not implemented; 1 words added

Revision Content

The bulk of the operations available at present with canvas are available through this interface, returned by a call to getContext on the canvas element (with the only presented supported argument, '2d' passed in).

Attributes

  // back-reference to the canvas
  readonly HTMLCanvasElement canvas

  // compositing
  float globalAlpha - (default 1.0)
  DOMString globalCompositeOperation - default source-over

  // colors and styles
  any strokeStyle - default black
  any fillStyle - default black

  // line caps/joins
  float lineWidth - default 1
  DOMString lineCap - "butt", "round", "square" (default "butt")
  DOMString lineJoin - "round", "bevel", "miter" (default "miter")
  float miterLimit - default 10

  // shadows
  float shadowOffsetX - default 0
  float shadowOffsetY - default 0
  float shadowBlur - default 0
  DOMString shadowColor - default transparent black

  // text
  DOMString font - default 10px sans-serif
  DOMString textAlign - "start", "end", "left", "right", "center" (default: "start")
  DOMString textBaseline -"top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")

Methods 

  // 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 float x, in float y) -
  void rotate(in float angle) -
  void translate(in float x, in float y) -
  void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy) -
  void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy) -

  // colors and styles
  CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1) -
  CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float 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) -

  // rects
  void clearRect(in float x, in float y, in float w, in float h) -
  void fillRect(in float x, in float y, in float w, in float h) -
  void strokeRect(in float x, in float y, in float w, in float h) -

  // path API
  void beginPath() -
  void closePath() -
  void moveTo(in float x, in float y) -
  void lineTo(in float x, in float y) -
  void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y) -
  void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y) -
  void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius) -
  void rect(in float x, in float y, in float w, in float h) -
  void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise) -
  void fill() -
  void stroke() -
  void clip() -
  boolean isPointInPath(in float x, in float y) -

  // focus management
  boolean drawFocusRing(in Element element, in float xCaret, in float yCaret, in optional boolean canDrawCustom) -Unimplemented

  // text

  void fillText(in DOMString text, in float x, in float y, in optional float maxWidth) -
  void strokeText(in DOMString text, in float x, in float y, in optional float maxWidth) -
  TextMetrics measureText(in DOMString text) -

  // drawing images
  void drawImage(in HTMLImageElement image, in float dx, in float dy, in optional float dw, in float dh) -
  void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) -
  void drawImage(in HTMLCanvasElement image, in float dx, in float dy, in optional float dw, in float dh) -
  void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) -
  void drawImage(in HTMLVideoElement image, in float dx, in float dy, in optional float dw, in float dh) -
  void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) -

  // pixel manipulation
  ImageData createImageData(in float sw, in float sh) -
  ImageData createImageData(in ImageData imagedata) -
  ImageData getImageData(in float sx, in float sy, in float sw, in float sh) -
  void putImageData(in ImageData imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight) -

Specification

Revision Source

<p>The bulk of the operations available at present with <a href="/en/HTML/Canvas" title="en/HTML/canvas">canvas</a> are available through this interface, returned by a call to <code>getContext</code> on the <a href="/en/HTML/Element/canvas" title="en/HTML/Element/canvas">canvas element</a> (with the only presented supported argument, '2d' passed in).</p>
<h3>Attributes</h3>
<p>  // back-reference to the canvas<br>
  readonly <a href="/en/HTML/Element/canvas" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a> <strong>canvas</strong><br>
<br>
  // compositing<br>
  float <strong>globalAlpha</strong> - (default 1.0)<br>
  DOMString <strong>globalCompositeOperation</strong> - default source-over<br>
<br>
  // colors and styles<br>
  any <strong>strokeStyle</strong> - default black<br>
  any <strong>fillStyle</strong> - default black</p>
<p>  // line caps/joins<br>
  float <strong>lineWidth</strong> - default 1<br>
  DOMString <strong>lineCap</strong> - "butt", "round", "square" (default "butt")<br>
  DOMString <strong>lineJoin</strong> - "round", "bevel", "miter" (default "miter")<br>
  float <strong>miterLimit</strong> - default 10<br>
<br>
  // shadows<br>
  float <strong>shadowOffsetX</strong> - default 0<br>
  float <strong>shadowOffsetY</strong> - default 0<br>
  float <strong>shadowBlur</strong> - default 0<br>
  DOMString <strong>shadowColor</strong> - default transparent black</p>
<p>  // text<br>
  DOMString <strong>font</strong> - default 10px sans-serif<br>
  DOMString <strong>textAlign</strong> - "start", "end", "left", "right", "center" (default: "start")<br>
  DOMString <strong>textBaseline</strong> -"top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")</p>
<h3>Methods </h3>
<p>  // state<br>
  void <strong>save</strong>() - push state on state stack<br>
  void <strong>restore</strong>() - pop state stack and restore state<br>
<br>
  // transformations (default transform is the identity matrix)<br>
  void <strong>scale</strong>(in float x, in float y) - <br>
  void <strong>rotate</strong>(in float angle) - <br>
  void <strong>translate</strong>(in float x, in float y) - <br>
  void <strong>transform</strong>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy) - <br>
  void <strong>setTransform</strong>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy) -</p>
<p>  // colors and styles<br>
  <a href="/en/DOM/CanvasGradient" title="en/DOM/CanvasGradient">CanvasGradient</a> <strong>createLinearGradient</strong>(in float x0, in float y0, in float x1, in float y1) - <br>
  <a href="/en/DOM/CanvasGradient" title="en/DOM/CanvasGradient">CanvasGradient</a> <strong>createRadialGradient</strong>(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1) - <br>
  <a href="/en/DOM/CanvasPattern" title="en/DOM/CanvasPattern">CanvasPattern</a> <strong>createPattern</strong>(in <a href="/en/DOM/HTMLImageElement" title="en/DOM/HTMLImageElement">HTMLImageElement</a> image, in DOMString repetition) - <br>
  <a href="/en/DOM/CanvasPattern" title="en/DOM/CanvasPattern">CanvasPattern</a> <strong>createPattern</strong>(in <a href="/en/HTML/Element/canvas" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a> image, in DOMString repetition) - <br>
  <a href="/en/DOM/CanvasPattern" title="en/DOM/CanvasPattern">CanvasPattern</a> <strong>createPattern</strong>(in <a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement">HTMLVideoElement</a> image, in DOMString repetition) - <br>
<br>
  // rects<br>
  void <strong>clearRect</strong>(in float x, in float y, in float w, in float h) - <br>
  void <strong>fillRect</strong>(in float x, in float y, in float w, in float h) - <br>
  void <strong>strokeRect</strong>(in float x, in float y, in float w, in float h) - <br>
<br>
  // path API<br>
  void <strong>beginPath</strong>() - <br>
  void <strong>closePath</strong>() - <br>
  void <strong>moveTo</strong>(in float x, in float y) - <br>
  void <strong>lineTo</strong>(in float x, in float y) - <br>
  void <strong>quadraticCurveTo</strong>(in float cpx, in float cpy, in float x, in float y) - <br>
  void <strong>bezierCurveTo</strong>(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y) - <br>
  void <strong>arcTo</strong>(in float x1, in float y1, in float x2, in float y2, in float radius) - <br>
  void <strong>rect</strong>(in float x, in float y, in float w, in float h) - <br>
  void <strong>arc</strong>(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise) - <br>
  void <strong>fill</strong>() - <br>
  void <strong>stroke</strong>() - <br>
  void <strong>clip</strong>() - <br>
  boolean <strong>isPointInPath</strong>(in float x, in float y) - <br>
<br>
  // focus management<br>
  boolean <strong>drawFocusRing</strong>(in Element element, in float xCaret, in float yCaret, in optional boolean canDrawCustom) -<span class="lang lang-en"><span style="border: 1px solid rgb(255, 205, 154); background-color: rgb(255, 153, 204); font-size: x-small; white-space: nowrap; padding: 2px;">Unimplemented</span></span></p>
<p>  // text</p>
<p>  void <strong>fillText</strong>(in DOMString text, in float x, in float y, in optional float maxWidth) - <br>
  void <strong>strokeText</strong>(in DOMString text, in float x, in float y, in optional float maxWidth) - <br>
  <a href="/en/DOM/TextMetrics" title="en/DOM/TextMetrics">TextMetrics</a> <strong>measureText</strong>(in DOMString text) - <br>
<br>
  // drawing images<br>
  void <strong>drawImage</strong>(in <a href="/en/DOM/HTMLImageElement" title="en/DOM/HTMLImageElement">HTMLImageElement</a> image, in float dx, in float dy, in optional float dw, in float dh) - <br>
  void <strong>drawImage</strong>(in <a href="/en/DOM/HTMLImageElement" title="en/DOM/HTMLImageElement">HTMLImageElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) - <br>
  void <strong>drawImage</strong>(in <a href="/en/HTML/Element/canvas" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a> image, in float dx, in float dy, in optional float dw, in float dh) - <br>
  void <strong>drawImage</strong>(in <a href="/en/HTML/Element/canvas" title="en/DOM/HTMLCanvasElement">HTMLCanvasElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) - <br>
  void <strong>drawImage</strong>(in <a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement">HTMLVideoElement</a> image, in float dx, in float dy, in optional float dw, in float dh) - <br>
  void <strong>drawImage</strong>(in <a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement">HTMLVideoElement</a> image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh) - <br>
<br>
  // pixel manipulation<br>
  <a href="/en/DOM/ImageData" title="en/DOM/ImageData">ImageData</a> <strong>createImageData</strong>(in float sw, in float sh) - <br>
  <a href="/en/DOM/ImageData" title="en/DOM/ImageData">ImageData</a> <strong>createImageData</strong>(in <a href="/en/DOM/ImageData" title="en/DOM/ImageData">ImageData</a> imagedata) - <br>
  <a href="/en/DOM/ImageData" title="en/DOM/ImageData">ImageData</a> <strong>getImageData</strong>(in float sx, in float sy, in float sw, in float sh) - <br>
  void <strong>putImageData</strong>(in <a href="/en/DOM/ImageData" title="en/DOM/ImageData">ImageData</a> imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight) -</p>
<h3>Specification</h3>
<ul> <li><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d" rel="freelink">http://www.whatwg.org/specs/web-apps...eringcontext2d</a></li>
</ul>
Revert to this revision