JavaScript HTMLCanvasElement : HTMLElement

HTMLCanvasElement is an element that allows programmatically creating images in the browser. It corresponds to the <canvas> tag.

Instance Properties

height : Number

The height of this in pixels. Setting height clears the buffer.

Example:

<canvas id='canvas' width='150' height='75'></canvas>
<script>
  var canvas = document.getElementById('canvas');

  console.log(canvas.height);
</script>

Run

Results:

Spec

width : Number

The width of this in pixels. Setting width clears the buffer.

Example:

<canvas id='canvas' width='150' height='75'></canvas>
<script>
  var canvas = document.getElementById('canvas');

  console.log(canvas.width);
</script>

Run

Results:

Spec

Instance Methods

captureStream([requestedFrameRate : Number]) : MediaStream

Creates a video stream for the canvas. requestedFrameRate can be used to update the video at a slower frequency than the canvas. If set to 0, use CanvasCaptureMediaStreamTrack.requestFrame to update the video.

Example:

<canvas></canvas>
<video autoplay></video>
<script>
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  let color = 0;
  const draw = () => {
    color = (color + 2) % 255;
    context.fillStyle = `rgb(${color}, 0, 0)`;
    context.fillRect(0, 0, 300, 150);
    requestAnimationFrame(draw);
  }
  draw();

  const video = document.querySelector('video');
  video.srcObject = canvas.captureStream();
</script>

Run

Results:

Spec

getContext(contextType : String, [contextAttributes : Object]) : CanvasRenderingContext

Returns a context that can be used to draw into the canvas. contextType can be '2d' to retrieve a CanvasRenderingContext2D 'bitmaprenderer' to retrieve an ImageBitmapRenderingContext or 'webgl' to retrieve a WebGLRenderingContext. <br> When specifying 'webgl', you can configure how the context is initialized by passing a WebGLContextAttributes as the second parameter.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(10, 10, 20, 40);

  context.fillStyle = 'rgba(0,0,255,0.7)';
  context.fillRect(20, 20, 40, 20);
</script>

Run

Results:

Spec

toBlob(callback : Function, [type = 'image/png' : String, [quality : Number]]) : undefined

callback(blob : Blob) : undefined

Calls callback with a blob representation of the canvas. type can be 'image/png' or 'image/jpeg'. When using 'image/jgeg', you may provide the quality parameter (0.0 to 1.0) to change the quality of the saved file and consequently the size of the file. Note, if you are using WebGL, you must paint to the canvas immediately before calling toBlob, or set preserveDrawingBuffer to true to keep the buffer available after the browser has displayed the contents.

Example:

<canvas id='canvas'></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(10, 10, 20, 40);

  context.fillStyle = 'rgba(0,0,255,0.7)';
  context.fillRect(20, 20, 40, 20);

  canvas.toBlob(function(blob) {
    console.log(blob.type);
    console.log(blob.size);
  });
</script>

Run

Results:

Spec

toDataURL([type = 'image/png' : String, [quality : Number]]) : String

Returns a 'data:' string representation of the canvas. type can be 'image/png' or 'image/jpeg'. When using 'image/jgeg', you may provide the quality parameter (0.0 to 1.0) to change the quality of the saved file and consequently the size of the file. Note, if you are using WebGL, you must paint to the canvas immediately before calling toDataURL, or set preserveDrawingBuffer to true to keep the buffer available after the browser has displayed the contents.

Example:

<canvas id='canvas'></canvas>
<img id='img'>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillStyle = 'red';
  context.fillRect(10, 10, 20, 40);

  context.fillStyle = 'rgba(0,0,255,0.7)';
  context.fillRect(20, 20, 40, 20);

  // Apply the dataURL to a image's src property
  var img = document.getElementById('img');
  img.src = canvas.toDataURL();
  console.log(img.src);
</script>

Run

Results:

Spec

home license contribute feedback