The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.
var canvas = document. getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // draw something ctx.lineWidth = 1; ctx.strokeStyle = 'black'; ctx.beginPath(); ctx.ellipse(100, 50, 80, 20, 0, 0, 2*Math.PI); ctx.stroke();
See also some examples of how to draw on canvas.
X-axis of canvas is from left to right.
Y-axis of canvas is from top to bottom.
state of canvas
State of canvas includes:
- current transformation matrix
- current clipping region
- current dash pattern
- properties of canvas such lineWidth, shadowOffsetX, globalCompositeOperation, font and etc
|save()||Saves the entire state of the canvas by pushing the current state onto a stack.|
|restore()||Restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.|
fill and stroke
|strokeStyle||Specifies the color, gradient, or pattern to use for the strokes around shapes. The default is "#000" (black).|
|fillStyle||Specifies the color, gradient, or pattern to use inside shapes. The default style is "#000" (black).|
|lineCap||Specifies the shape used to draw the end points of lines. Possible values:
|lineWidth||Sets the thickness of lines. Zero, negative, Infinity, and NaN values are ignored. Default value is 1.0.|
|lineDashOffset||Sets the line dash offset. Default value is 0.0.|
|miterLimit||Sets the miter limit ratio. Default value is 10.0.|
|lineJoin||determines the shape used to join two line segments where they meet. Possible values:
Sets the line dash pattern used when stroking lines. Parameter segments is array of numbers where odd elements specify the stroke length and even elements define the gap between strokes.
If the number of elements in the array is odd, the elements of the array get copied and concatenated.
To return to using solid lines, pass an empty array.
|getLineDash()||Gets the current line dash pattern.|
|fill( [fillRule] ) fill(path [, fillRule])||Fills the current or given path. Parameter fillRule
specifies the algorithm by which to determine if a point is inside or outside the filling region:
|stroke()stroke(path)||Strokes the current or given path.|
Following methods don't directly render anything, only modify current path. Use the stroke() or fill() methods for rendering.
|beginPath()||Starts a new path. To create a new sub-path you can use the moveTo() method.|
|closePath()||Attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.|
|moveTo(x, y)||Begins a new sub-path at the point specified by the given (x, y) coordinates.|
|lineTo(x, y)||Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.|
|arcTo(x, y)||Adds a circular arc to the current sub-path, using the given control points and radius. See example of rounded rectangle.|
|bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)||Adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve.|
|quadraticCurveTo(cpx, cpy, x, y)||Adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.|
|ellipse(x, y, rX, rY, rot, startAngle, endAngle [, anticlockwise])||Creates an elliptical arc centered at (x, y) with the radius rX and rY. The path starts at startAngle and ends at endAngle, and travels in the direction given by anticlockwise (default clockwise).|
|arc(x, y, r, startAngle, endAngle [, anticlockwise])||Creates a circular arc centered at (x, y) with a radius of r. The path starts at startAngle, ends at endAngle, and travels in the direction given by anticlockwise (default clockwise).|
|rect(x, y, w, h)||Creates a rectangular path whose starting point is at (x, y) and whose size is specified by w and h.|
There is also the Path2D class, which gives you the convenience of being able to retain and replay your path whenever desired. It implements
- xxxTo() methods
- closePath() method
- addPath() method for adding another path
For rendering Path2D objects use the fill(path) or stroke(path) methods of the canvas context.
|font||Specifies the current text style to use when drawing text. This string uses the same syntax as the font CSS specifier.|
|textAlign||Specifies the current text alignment used when drawing text. Possible values:
|textBaseline||Specifies the current text baseline used when drawing text. Possible values:
|strokeText(txt, x, y [, maxWidth])||Draws text with outline characters.|
|fillText(txt, x, y [, maxWidth])||Draws text with filled characters.|
Read more about the transformation matrix if necessary.
There is the DOMMatrix class that represent the transformation matrix. It can be initialized with CSS transform string, or a string or an array of numbers a, b, c, d, e, f to get a matrix:
|a c e| |b d f| |0 0 1|
See example how to rotate canvas on 90°.
|getTransform()||Retrieves the current transformation matrix.|
|setTransform(a, b, c, d, e, f)||Overrides the current transformation with the specified transformation matrix.|
|setTransform(m)||Overrides the current transformation with the specified DOMMatrix object.|
|transform(a, b, c, d, e, f)||Multiplies the current transformation with given matrix.|
|translate(x, y)||Adds a translation transformation to the current matrix.|
|rotate(angle)||Adds a rotation to the transformation matrix. The rotation angle is clockwise in radians.|
|scale(x, y)||adds a scaling transformation to the to the transformation matrix.|