docs.rodeo

MDN Web Docs mirror

CanvasRenderingContext2D

{{APIRef}} 

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a {{HTMLElement("canvas")}}  element. It is used for drawing shapes, text, images, and other objects.

The interface’s properties and methods are described in the reference section of this page. The Canvas tutorial has more explanation, examples, and resources, as well.

For OffscreenCanvas, there is an equivalent interface that provides the rendering context. The offscreen rendering context inherits most of the same properties and methods as the CanvasRenderingContext2D and is described in more detail in the {{domxref("OffscreenCanvasRenderingContext2D")}}  reference page.

Basic example

To get a CanvasRenderingContext2D instance, you must first have an HTML <canvas> element to work with:

<canvas id="my-house" width="300" height="300"></canvas>

To get the canvas’ 2D rendering context, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}}  on the <canvas> element, supplying '2d' as the argument:

const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

With the context in hand, you can draw anything you like. This code draws a house:

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

The resulting drawing looks like this:

{{EmbedLiveSample("Basic_example", 700, 330)}} 

Reference

Context

Drawing rectangles

There are three methods that immediately draw rectangles to the canvas.

Drawing text

The following methods draw text. See also the {{domxref("TextMetrics")}}  object for text properties.

Line styles

The following methods and properties control how lines are drawn.

Text styles

The following properties control how text is laid out.

Fill and stroke styles

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

Gradients and patterns

Shadows

Paths

The following methods can be used to manipulate paths of objects.

Drawing paths

Transformations

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}}  objects. The methods listed below remain for historical and compatibility reasons as {{domxref("DOMMatrix")}}  objects are used in most parts of the API nowadays and will be used in the future instead.

Compositing

Drawing images

Pixel manipulation

See also the {{domxref("ImageData")}}  object.

Image smoothing

The canvas state

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

Filters

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN