CanvasRenderingContext2D : CanvasRenderingContext

The CanvasRenderingContext2D is an object that is used to issue 2D drawing commands to a canvas. It is obtained by passing '2d' to the HTMLCanvasElement.getContext() method.

Spec

Instance Properties

canvas : HTMLCanvasElement readonly

The canvas that owns this context.

Example:

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

  console.log(context.canvas === canvas);
</script>

Run

Results:

Spec

fillStyle : Object

The brush used to fill the area of shapes. Must be a css color String (such as 'black' or '#000'), a CanvasGradient, or a CanvasPattern.

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:

font : String

The css string describing the font used to draw text. Defaults to '10px sans-serif'.

Example:

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

  context.font = '48px sans-serif';
  context.fillText('canvas test', 10, 35);
</script>

Run

Results:

globalAlpha : Number

The alpha to use for subsequent paint operations. Must be between 0 and 1. Defaults to 1.

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.globalAlpha = 0.3;
  context.fillRect(50, 10, 20, 40);
</script>

Run

Results:

globalCompositeOperation : String

Determines how subsequent paint operations combine with the back buffer. Must be one of the following (source refers to the current drawing operation and destination refers to the existing contents of the canvas):

Value	Operation
`'source-over'`	Draw the source on the canvas normally.
`'source-in'`	Keep the source where the destination is opaque.
`'source-out'`	Keep the source where the destination is transparent.
`'source-atop'`	Draw the source on the destination but only keep pixels that were opaque in the destination.
`'destination-over'`	Draw the source under the destination.
`'destination-in'`	Keep the destination where the source is opaque.
`'destination-out'`	Keep the destination where the source is transparent.
`'destination-atop'`	Draw the destination on the source but only keep pixels that were opaque in the source.
`'lighter'`	Increase the brightness of pixels under the source.
`'copy'`	Keep only the source.
`'xor'`	Exclusive OR of the source and destination.

Defaults to 'source-over'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['source-over', 'source-in', 'source-out', 'source-atop',
                 'destination-over', 'destination-in', 'destination-out', 'destination-atop',
                 'lighter', 'darker', 'copy', 'xor'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  var draw = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.globalCompositeOperation = 'source-over';
    context.fillStyle = 'red';
    context.fillRect(10, 10, 80, 140);

    context.globalCompositeOperation = select.value;
    context.fillStyle = 'blue';
    context.fillRect(40, 40, 100, 60);
  }
  draw();
</script>

Run

Results:

Spec

lineCap : String

Determines the shape of line endings. Must be one of 'butt', 'round', or 'square'. Defaults to 'butt'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['butt', 'round', 'square'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  var draw = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.lineCap = select.value;
    context.strokeStyle = 'black';
    context.lineWidth = 20;

    context.beginPath();
    context.moveTo(20,20);
    context.lineTo(100,100);
    context.lineTo(180,20);
    context.stroke();

    context.strokeStyle = 'white';
    context.lineWidth = 1;
    context.stroke();
  }
  draw();
</script>

Run

Results:

lineDashOffset : Number

Offsets the starting position of the line dash. See also setLineDash().

Example:

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

  context.setLineDash([5, 15]);

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();

  context.lineDashOffset = 10;

  context.strokeStyle = 'red';
  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();
</script>

Run

Results:

lineJoin : String

Determines how lines meet. Must be one of 'miter', 'round', or 'bevel'. Defaults to 'miter'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['miter', 'round', 'bevel'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  var draw = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.lineJoin = select.value;
    context.strokeStyle = 'black';
    context.lineWidth = 20;

    context.beginPath();
    context.moveTo(20,20);
    context.lineTo(100,100);
    context.lineTo(180,20);
    context.stroke();

    context.strokeStyle = 'white';
    context.lineWidth = 1;
    context.stroke();
  }
  draw();
</script>

Run

Results:

lineWidth : Number

The width of the stroke. The line is centered on the coordinates so half the width is on either side of the path. Defaults to 1.

Example:

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

  context.lineWidth = 20;

  context.beginPath();
  context.moveTo(20,20); context.lineTo(60,60); context.lineTo(100,20);
  context.stroke();

  // Draw red dashed line showing path
  context.lineWidth = 1;
  context.strokeStyle = 'red';
  context.setLineDash([2, 2]);
  context.beginPath();
  context.moveTo(20,20); context.lineTo(60,60); context.lineTo(100,20);
  context.stroke();

  // Draw dots
  var dotSize = 4;
  var halfDot = dotSize / 2;

  // (20, 20) Dot
  context.fillStyle = 'red';
  context.fillRect(20 - halfDot, 20 - halfDot, dotSize, dotSize); 
  context.textAlign = 'center';
  context.fillText('(20, 20)', 20, 10);

  // (60,60) Dot
  context.fillRect(60 - halfDot, 60 - halfDot, dotSize, dotSize); 
  context.fillText('(60, 60)', 60, 85);

  // (100, 20) Dot
  context.fillRect(100 - halfDot, 20 - halfDot, dotSize, dotSize); 
  context.fillText('(120, 20)', 100, 10);
</script>

Run

Results:

miterLimit : Number

Adjusts the maximum distance the miter point can extend from the joint.

Example:

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

  context.strokeStyle = 'black';
  context.lineWidth = 20;

  context.miterLimit = 1;

  // Top left
  context.beginPath();
  context.moveTo(20,20); context.lineTo(60,60); context.lineTo(100,20);
  context.stroke();

  // Top right
  context.beginPath();
  context.moveTo(140,20); context.lineTo(155,60); context.lineTo(170,20);
  context.stroke();

  context.miterLimit = 10;

  // Bottom left
  context.beginPath();
  context.moveTo(20,80); context.lineTo(60,120); context.lineTo(100,80);
  context.stroke();

  // Bottom right
  context.beginPath();
  context.moveTo(140,80); context.lineTo(155,120); context.lineTo(170,80);
  context.stroke();
</script>

Run

Results:

Spec

shadowBlur : Number

Describes how big the shadow blur is. Larger numbers are blurrier. Defaults to 0.

Example:

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

  context.shadowBlur = 3;
  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
  context.shadowOffsetX = 3;
  context.shadowOffsetY = 6;

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();

  context.fillStyle = 'red';
  context.fillRect(100, 20, 30, 30);
</script>

Run

Results:

shadowColor : String

The css color string of the shadow. Defaults to transparent.

Example:

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

  context.shadowBlur = 3;
  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
  context.shadowOffsetX = 3;
  context.shadowOffsetY = 6;

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();

  context.fillStyle = 'red';
  context.fillRect(100, 20, 30, 30);
</script>

Run

Results:

shadowOffsetX : Number

Determines the x offset of the shadow from the drawn shape.

Example:

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

  context.shadowBlur = 3;
  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
  context.shadowOffsetX = 3;
  context.shadowOffsetY = 6;

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();

  context.fillStyle = 'red';
  context.fillRect(100, 20, 30, 30);
</script>

Run

Results:

shadowOffsetY : Number

Determines the y offset of the shadow from the drawn shape.

Example:

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

  context.shadowBlur = 3;
  context.shadowColor = 'rgba(0, 0, 0, 0.5)';
  context.shadowOffsetX = 3;
  context.shadowOffsetY = 6;

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();

  context.fillStyle = 'red';
  context.fillRect(100, 20, 30, 30);
</script>

Run

Results:

strokeStyle : Object

The brush used to fill the stroke of shapes. Must be a css color String (such as 'black' or '#000'), a CanvasGradient, or a CanvasPattern. See also lineDashOffset, setLineDash().

Example:

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

  context.strokeStyle = 'red';
  context.strokeRect(10, 10, 20, 40);

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

Run

Results:

Spec

textAlign : String

Determines which edge of the text to place at the x coordinate passed to fillText or strokeText. Must be one of 'start', 'end', 'left', 'right', 'center'. Defaults to 'start'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['start', 'end', 'left', 'right', 'center'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  var draw = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.font = '20px sans-serif';
    context.textAlign = select.value;
    context.fillStyle = 'black';
    context.fillText('test', canvas.width / 2, canvas.height / 2);

    context.fillStyle = 'red';
    context.fillRect(canvas.width / 2 - 2, canvas.height / 2 - 2, 4, 4);
  }
  draw();
</script>

Run

Results:

Spec

textBaseline : String

Determines which edge of the text to place at the y coordinate passed to fillText or strokeText. Must be one of 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'. Defaults to 'alphabetic'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['top', 'hanging', 'middle', 'alphabetic',
                 'ideographic', 'bottom'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option, undefined, option == 'alphabetic'));
  });

  var draw = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var x = canvas.width / 2
    var y = canvas.height / 2
   
    context.fillStyle = 'red';
    context.fillRect(20, y, canvas.width-40, 0.5);
    context.font = '10px sans-serif';
    context.textBaseline = 'ideographic';
    context.fillText('y-coordinate', 20, y - 2)

    for (var i = 0; i < options.length; i++) {
      context.font = '20px sans-serif';
      context.textBaseline = options[i];
      context.fillStyle = options[i] == select.value ? 'blue' : 'black';

      context.save()
      context.translate(40 + 40*i, y);
      context.fillText('Ag', 0, 0);

      context.textBaseline = 'alphabetic';
      context.rotate(Math.PI/4);
      context.font = '12px sans-serif';
      context.fillStyle = options[i] == select.value ? 'blue' : '#aaa';
      context.fillText(options[i], 30, 20);
      context.restore()
    }   

  }
  draw();
</script>

Run

Results:

Spec

Instance Methods

arc(x : Number, y : Number, radius : Number, startAngle : Number, endAngle : Number, [counterclockwise = false : Boolean]) : undefined

Continues the current path by creating an arc of circle centered at x, y of radius radius from startAngle to endAngle. The angles are specified in radians where 0 points to the right, Math.PI / 2 points down, Math.PI points to the left, etc. The counterclockwise parameter determines which part of the circle is used for the path.

Example:

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

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();
</script>

Run

Results:

arcTo(controlX : Number, controlY : Number, endX : Number, endY : Number, radius : Number) : undefined

Draws 2 imaginary lines between the previous point and the control point and between the control point and the end point. arcTo fits a circle of the specified radius between these lines. The drawn figure is a line from the previous point to the place where the circle touches the first imaginary line and an arc along the circle to the point where it touches the second imaginary line. This method will not draw all the way to the end point (unless the end point matches the spot where the circle touches the secondary imaginary line).

Example:

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

  context.beginPath();
  context.moveTo(20, 20);
  context.arcTo(70, 70, 120, 20, 30);
  context.lineTo(120, 20);
  context.stroke();

  context.fillRect(70, 70, 2, 2);

  // Use arcTo to easily create a rounded rectangle
  var roundedRect = function(x, y, w, h, r) {
    context.beginPath();

    context.moveTo(x + r, y);
    context.arcTo(x + w, y, x + w, y + r, r);
    context.arcTo(x + w, y + h, x + w - r, y + h, r);
    context.arcTo(x, y + h, x, y + h - r, r);
    context.arcTo(x, y, x + r, y, r);
    context.closePath();

    context.stroke();
  }

  roundedRect(30, 105, 60, 40, 15);
</script>

Run

Results:

beginPath() : undefined

Begins a path. Use with moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arc(), arcTo(), and closePath() to define the shape of the path. Draw the path with fill() or stroke().

Example:

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

  context.lineWidth = 20;

  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(60,60);
  context.lineTo(100,20);
  context.stroke();
</script>

Run

Results:

bezierCurveTo(cp1x : Number, cp1y : Number, cp2x : Number, cp2y : Number, x : Number, y : Number) : undefined

Draw a bezier curve from the current point to x, y using cp1x, cp1y and cp2x, cp2y as control points. The curve generally does not pass through the control points.

Example:

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

  context.beginPath();
  context.moveTo(20, 20);
  context.bezierCurveTo(40, 60, 80, 5, 100, 20);
  context.stroke();

  context.fillRect(40, 60, 2, 2);
  context.fillRect(80, 5, 2, 2);
</script>

Run

Results:

clearRect(x : Number, y : Number, w : Number, h : Number) : undefined

Clears a rectangular portion of the canvas to transparent.

Example:

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

  context.fillRect(0, 0, canvas.width, canvas.height);
  context.clearRect(20, 60, 100, 50);
</script>

Run

Results:

clip() : undefined

Replaces the current clip region with the intersection of the current path and the current clip region. Use save() and restore() to save and restore clip regions.

Example:

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

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();
  context.clip();

  context.font = '48px sans-serif';
  context.strokeText('canvas test', 10, 55);
</script>

Run

Results:

closePath() : undefined

Joins the last line segment to the beginning of the path.

Example:

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

  context.lineWidth = 20;

  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(60,60);
  context.lineTo(100,20);
  context.closePath();
  context.stroke();
</script>

Run

Results:

createImageData 2 variants

createImageData(imageData : ImageData) : ImageData

Creates a buffer of the same size as imageData that can be filled with pixel data and later copied into the canvas using putImageData(). The buffer is initialized to transparent. See also getImageData() and putImageData().

Example:

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

  var imageData1 = context.createImageData(100, 100);
  var imageData2 = context.createImageData(imageData1);

  console.log(imageData1.width + ', ' + imageData1.height);
  console.log(imageData2.width + ', ' + imageData2.height);
</script>

Run

Results:

createImageData(sw : Number, sh : Number) : ImageData

Creates a buffer of size sw by sh that can be filled with pixel data and later copied into the canvas using putImageData(). The buffer is initialized to transparent. See also getImageData() and putImageData().

Example:

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

  var imageData = context.createImageData(100, 100);

  for (var i = 0; i < imageData.data.length; i++) {
    imageData.data[i] = Math.round(255 * Math.random());
  }

  context.putImageData(imageData, 0, 0);
</script>

Run

Results:

createLinearGradient(x0 : Number, y0 : Number, x1 : Number, y1 : Number) : CanvasGradient

Creates a linear gradient from x0, y0 to x1, y1.

Example:

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

  var g = context.createLinearGradient(0,0,canvas.width,0);
  g.addColorStop(0, 'white');
  g.addColorStop(1, 'blue');

  context.fillStyle = g;
  context.fillRect(0,0,canvas.width,canvas.height);
</script>

Run

Results:

createPattern(image : HTMLImageElement, repetition : String) : CanvasPattern

Creates a pattern for the specified image. image can be either a HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or ImageBitmap. repetition must be one of 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.

Example:

<select id='select' onchange='draw()'></select>
<canvas id='canvas'></canvas>
<script>
  var options = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'];
  var select = document.getElementById('select');
  options.forEach(function(option, i) {
    select.add(new Option(option, option));
  });

  var draw = function() {
    var patternCanvas = document.createElement('canvas');
    patternCanvas.width = patternCanvas.height = 50;
    var patternContext = patternCanvas.getContext('2d');
    patternContext.drawImage(img, 0, 0, patternCanvas.width, patternCanvas.height);

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = context.createPattern(patternCanvas, select.value);
    context.fillRect(0, 0, canvas.width, canvas.height);
  }

  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = draw;
</script>

Run

Results:

createRadialGradient(x0 : Number, y0 : Number, r0 : Number, x1 : Number, y1 : Number, r1 : Number) : CanvasGradient

Creates a radial gradient from the circle at x0, y0 with radius r0 to the circle at x1, y1 with radius r1.

Example:

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

  var g = context.createRadialGradient(150,75,0, 150,75,150);
  g.addColorStop(0, 'white');
  g.addColorStop(1, 'blue');

  context.fillStyle = g;
  context.fillRect(0,0,canvas.width,canvas.height);
</script>

Run

Results:

drawImage 3 variants

drawImage(image : HTMLImageElement, dx : Number, dy : Number) : undefined

Draws image to the canvas at dx, dy using the natural size of the image. image can be either an HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or ImageBitmap.

Example:

<canvas id='canvas'></canvas>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
  };
</script>

Run

Results:

drawImage(image : HTMLImageElement, dx : Number, dy : Number, dw : Number, dh : Number) : undefined

Draws image to the canvas at dx, dy of size dw by dh. image can be either an HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or ImageBitmap.

Example:

<canvas id='canvas'></canvas>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
  };
</script>

Run

Results:

drawImage(image : HTMLImageElement, sx : Number, sy : Number, sw : Number, sh : Number, dx : Number, dy : Number, dw : Number, dh : Number) : undefined

Draws the subregion of image starting at sx, sy of size sw by sh into the subregion of the canvas at dx, dy of size dw by dh. The image will be stretched and scaled if sw, sh does not match dw by dh. image can be either an HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or ImageBitmap.

Example:

<canvas id='canvas'></canvas>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.drawImage(img, 40, 100, 50, 50, 0, 0, 100, 100);
  };
</script>

Run

Results:

fill([fillRule = 'nonzero' : String]) : undefined

Fills the current path with the current fillStyle. fillRule must be one of 'nonzero' or 'evenodd'.

Example:

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

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.fill();
</script>

Run

Results:

Spec

fillRect(x : Number, y : Number, w : Number, h : Number) : undefined

Fills a rectangle with the fillStyle.

Example:

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

  context.fillRect(10, 10, 20, 40);
</script>

Run

Results:

fillText(text : String, x : Number, y : Number, [maxWidth : Number]) : undefined

Draws the specified string at x and y using fillStyle, font, textAlign, and textBaseline.

Example:

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

  context.font = '48px sans-serif';
  context.fillText('canvas test', 10, 35);
</script>

Run

Results:

getImageData(sx : Number, sy : Number, sw : Number, sh : Number) : ImageData

Retrieves the contents of the canvas starting at sx, sy of size sw by sh. See also createImageData() and putImageData().

Example:

<canvas id='canvas'></canvas>
<script>
  var img = new Image();
  img.src = 'pic.jpg';
  img.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < imageData.data.length; i++) {
      imageData.data[i] *= 1.5; // Increase brightness of each component
    }

    context.putImageData(imageData, 0, 0);
  };
</script>

Run

Results:

getTransform() : DOMMatrix

Gets the current transform. See also setTransform().

Example:

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

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

  var matrix = new DOMMatrix();
  matrix.translateSelf(50, 20);
  matrix.scaleSelf(2);

  context.setTransform(matrix);

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

  console.log(context.getTransform());
</script>

Run

Results:

Spec

isPointInPath(x : Number, y : Number) : Boolean

Returns true if the specified location is in the current path (from the most recent call to beginPath()).

Example:

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

  context.fillStyle = 'black';
  context.beginPath();
  context.moveTo(20, 20);
  context.lineTo(60, 60);
  context.lineTo(100, 20);
  context.fill();

  context.fillStyle = 'red'
  context.fillRect(50, 30, 4, 4);
  context.fillText('isPointInPath = ' + context.isPointInPath(50, 30), 0, 100);

  context.fillStyle = 'blue'
  context.fillRect(90, 50, 4, 4);
  context.fillText('isPointInPath = ' + context.isPointInPath(50, 70), 0, 120);
</script>

Run

Results:

lineTo(x : Number, y : Number) : undefined

Draw a line from current point of the current path to x, y.

Example:

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

  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(60,60);
  context.lineTo(100,20);
  context.stroke();
</script>

Run

Results:

measureText(text : String) : TextMetrics

Retrieves information about the rendered size of text.

Example:

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

  context.fillText('hello world', 0, 30);

  var textMetrics = context.measureText('hello world');

  context.fillRect(0, 35, textMetrics.width, 1);
</script>

Run

Results:

moveTo(x : Number, y : Number) : undefined

Move current point of the current path to x, y without connecting the stroke.

Example:

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

  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(60,60);

  context.moveTo(80,20);
  context.lineTo(120,60);
  context.stroke();
</script>

Run

Results:

putImageData(imageData : ImageData, dx : Number, dy : Number, [dirtyX : Number, dirtyY : Number, dirtyWidth : Number, dirtyHeight : Number]) : undefined

Copies the contents of imageData into the canvas at dx, dy. If the dirty parameters are specified, only that region of the imageData is copied. See also createImageData() and getImageData().

Example:

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

  // create a 100x100 region of random colors
  var imageData = context.createImageData(100, 100);

  for (var i = 0; i < imageData.data.length; i++) {
    imageData.data[i] = Math.round(255 * Math.random());
  }

  context.putImageData(imageData, 0, 0);
</script>

Run

Results:

quadraticCurveTo(cpx : Number, cpy : Number, x : Number, y : Number) : undefined

Draw a quadratic curve from the current point to x, y using cpx, cpy as a control point. The curve generally does not pass through the control point.

Example:

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

  context.beginPath();
  context.moveTo(20, 20);
  context.quadraticCurveTo(60, 60, 100, 20);
  context.stroke();

  context.fillRect(60, 60, 2, 2);
</script>

Run

Results:

rect(x : Number, y : Number, w : Number, h : Number) : undefined

Add a closed rectangle to the current path.

Example:

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

  context.beginPath();
  context.rect(20, 20, 60, 40);
  context.rect(100, 20, 60, 40);
  context.stroke();
</script>

Run

Results:

restore() : undefined

Restores the state from the the previous save() call.

Example:

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

  context.save();
  context.translate(100, 20);
  context.fillStyle = 'red';
  context.fillRect(0, 0, 20, 40);

  context.restore();
  context.fillStyle = 'blue';
  context.fillRect(0, 0, 20, 40);
</script>

Run

Results:

rotate(angle : Number) : undefined

Applies a rotation transform to the current transform so subsequent drawing operations are rotated by angle radians. Positive angles are clockwise.

Example:

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

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

  context.rotate(Math.PI / 6);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

save() : undefined

Saves the current state of the this onto the stack. Call restore() to restore the saved state. The saved state consists of: transformation matrix, clip region, fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, and textBaseline.

Example:

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

  context.save();
  context.translate(100, 20);
  context.fillStyle = 'red';
  context.fillRect(0, 0, 20, 40);

  context.restore();
  context.fillStyle = 'blue';
  context.fillRect(0, 0, 20, 40);
</script>

Run

Results:

scale(x : Number, y : Number) : undefined

Applies a scale transform to the current transform so subsequent drawing operations are scale by x, y.

Example:

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

  context.fillStyle = 'red';
  context.fillText('hello', 10, 30);

  context.scale(6, 2);

  context.fillStyle = 'blue';
  context.fillText('hello', 10, 30);
</script>

Run

Results:

setLineDash(pattern : Array<Number>) : undefined

Defines how long the dash, gaps of stroke are. Set to an empty array to have a solid line. See also lineDashOffset.

Example:

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

  context.setLineDash([5, 10]);

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();
</script>

Run

Results:

setTransform 3 variants

setTransform(matrix : Object) : undefined

Same as this.setTransform(DOMMatrix.fromMatrix(matrix)).

Example:

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

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

  var scale = 2;
  var translateX = 50;
  var translateY = 20;

  context.setTransform({a: 2, d: 2, e: translateX, f: translateY });

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

setTransform(matrix : DOMMatrix) : undefined

Replaces the current transform with specified matrix. matrix can also be an Object that can be passed to the DOMMatrix constructor. See also getTransform().

Example:

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

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

  var matrix = new DOMMatrix();
  matrix.translateSelf(50, 20);
  matrix.scaleSelf(2);

  context.setTransform(matrix);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

Spec

setTransform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined

Replaces the current transform with following matrix:

`a`	`c`	`e`
`b`	`d`	`f`
`0`	`0`	`1`

Example:

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

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

  var scale = 2;
  var translateX = 50;
  var translateY = 20;

  context.setTransform(     scale,          0,
                                0,      scale,
                       translateX, translateY);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

Spec

stroke() : undefined

Draws a line around the current path with the current strokeStyle and lineWidth.

Example:

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

  context.beginPath();
  context.arc(50, 50, 30, 0, 2 * Math.PI);
  context.stroke();
</script>

Run

Results:

strokeRect(x : Number, y : Number, w : Number, h : Number) : undefined

Draws a rectangular path with the current strokeStyle and lineWidth.

Example:

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

  context.strokeRect(10, 10, 20, 40);
</script>

Run

Results:

strokeText(text : String, x : Number, y : Number, [maxWidth : Number]) : undefined

Draws an outline of the specified string at x and y using strokeStyle, lineWidth, font, textAlign, and textBaseline.

Example:

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

  context.font = '48px sans-serif';
  context.strokeText('canvas test', 10, 35);
</script>

Run

Results:

transform(a : Number, b : Number, c : Number, d : Number, e : Number, f : Number) : undefined

Applies the following transform to the current transform.

`a`	`c`	`e`
`b`	`d`	`f`
`0`	`0`	`1`

Example:

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

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

  var scale = 2;
  var translateX = 50;
  var translateY = 20;

  context.transform(     scale,          0,
                             0,      scale,
                    translateX, translateY);

  context.fillStyle = 'blue';
  context.fillRect(20, 20, 20, 40);
</script>

Run

Results:

translate(x : Number, y : Number) : undefined

Applies a translate transform to the current transform so subsequent drawing operations are shifted by x, y.

Example:

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

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

  context.translate(100, 20);

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

Run

Results:

home license contribute feedback toggle light/dark mode