files/en-us/web/api/canvasrenderingcontext2d/index.md
{{APIRef("Canvas API")}}
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.
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)}}
true if the rendering context was lost.There are three methods that immediately draw rectangles to the canvas.
The following methods draw text. See also the {{domxref("TextMetrics")}} object for text properties.
The following methods and properties control how lines are drawn.
1.0.butt (default), round, square.round, bevel, miter (default).10.The following properties control how text is laid out.
"10px sans-serif".start (default), end, left, right, center.top, hanging, middle, alphabetic (default), ideographic, bottom.ltr, rtl, inherit (default).0px.auto (default), normal, none.ultra-condensed, extra-condensed, condensed, semi-condensed, normal (default), semi-expanded, expanded, extra-expanded, ultra-expanded.normal (default), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.auto (default), optimizeSpeed, optimizeLegibility, geometricPrecision.0pxFill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.
black.black.0.0.0.The following methods can be used to manipulate paths of objects.
clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.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.
transform() method with the same arguments.1.0 (opaque).globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.See also the {{domxref("ImageData")}} object.
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:
restore().save().null if it is not associated with a {{HTMLElement("canvas")}} element.true if the rendering context was lost.{{Specifications}}
{{Compat}}