Graphics
Sub Menu Here
Using Canvas
| arc() |
The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.
|
|---|---|
| arcTo() |
The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds a circular arc to the current sub-path,
using the given control points and radius. The arc is automatically connected to the path's latest point with
a straight line, if necessary for the specified parameters. This method is commonly used for making rounded corners. |
| beginPath() |
The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of
sub-paths. Call this method when you want to create a new path.
|
| bezierCurveTo() |
The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API 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.
|
| clearRect() |
The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area
by setting them to transparent black.
|
| clip() |
The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the
current clipping region. The previous clipping region, if any, is intersected with the current or given
path to create the new clipping region.
|
| closePath() |
The CanvasRenderingContext2D.closePath() method of the Canvas 2D API 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.
This method doesn't draw anything to the canvas directly. You can render the path using the stroke() or fill() methods. |
| createConicGradient() |
The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around
a point with given coordinates.
This method returns a conic CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties. |
| createImageData() |
The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new,
blank ImageData object with the specified dimensions. All of the pixels in the new object
are transparent black.
|
| createLinearGradient() |
The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along
the line connecting two given coordinates.
This method returns a linear CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties. |
| createPattern() |
The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the
specified image and repetition. This method returns a CanvasPattern.
This method doesn't draw anything to the canvas directly. The pattern it creates must be assigned to the CanvasRenderingContext2D.fillStyle or CanvasRenderingContext2D.strokeStyle properties, after which it is applied to any subsequent drawing. |
| createRadialGradient() |
The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial
gradient using the size and coordinates of two circles.
This method returns a CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties. |
| drawFocusIfNeeded() |
The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring around
the current or given path, if the specified element is focused.
|
| drawImage() |
The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an
image onto the canvas.
|
| ellipse() |
The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current
sub-path.
|
| fill() |
The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the
current fillStyle.
|
| fillRect() |
The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled
according to the current fillStyle.
This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. |
| fillText() |
The CanvasRenderingContext2D method fillText(), part of the Canvas 2D API, draws a text string at the
specified coordinates, filling the string's characters with the current fillStyle. An optional parameter
allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing
the text or by using a lower font size.
This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. The text is rendered using the font and text layout configuration as defined by the font, textAlign, textBaseline, and direction properties. |
| getContextAttribute() |
The CanvasRenderingContext2D.getContextAttributes() method returns an object that contains the actual
context parameters. Context attributes can be requested with HTMLCanvasElement.getContext() on context
creation.
|
| getImageData() |
The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object
representing the underlying pixel data for a specified portion of the canvas.
This method is not affected by the canvas's transformation matrix. If the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned ImageData object. |
| getLineDash() |
The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.
|
| getTransform() |
The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix
being applied to the context.
|
| isPointInPath() |
The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point
is contained in the current path.
|
| isPointInStroke() |
The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified
point is inside the area contained by the stroking of a path.
|
| lineTo() |
The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current
sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
Like other methods that modify the current path, this method does not directly render anything. To draw the path onto a canvas, you can use the fill() or stroke() methods. |
| measureText() |
The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information
about the measured text (such as its width, for example).
|
| moveTo() |
The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified
by the given (x, y) coordinates.
|
| putImageData() |
The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData
object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
This method is not affected by the canvas transformation matrix.
|
| quadraticCurveTo() |
The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API 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.
|
| rect() |
The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.
Like other methods that modify the current path, this method does not directly render anything. To draw the rectangle onto a canvas, you can use the fill() or stroke() methods. |
| reset() |
The CanvasRenderingContext2D.reset() method of the Canvas 2D API resets the rendering context to its
default state, allowing it to be reused for drawing something else without having to explicitly reset
all the properties.
Resetting clears the backing buffer, drawing state stack, any defined paths, and styles. This includes the current transformation matrix, compositing properties, clipping region, dash list, line styles, text styles, shadows, image smoothing, filters, and so on. |
| resetTransform() |
The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform
to the identity matrix.
|
| restore() |
The CanvasRenderingContext2D.restore() method of the Canvas 2D API 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.
|
| rotate() |
The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.
|
| roundRect() |
The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.
The radii of the corners can be specified in much the same way as the CSS border-radius property. Like other methods that modify the current path, this method does not directly render anything. To draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods. |
| save() |
The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing
the current state onto a stack.
|
| scale() |
The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas
units horizontally and/or vertically.
By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior. For instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size. |
| setLineDash() |
The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface sets the line dash pattern
used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which
describe the pattern.
|
| setTransform() |
The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API resets (overrides) the current
transformation to the identity matrix, and then invokes a transformation described by the arguments of
this method. This lets you scale, rotate, translate (move), and skew the context.
|
| stroke() |
The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given
path with the current stroke style.
Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side. The stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled. |
| strokeRect() |
The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked
(outlined) according to the current strokeStyle and other context settings.
This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. |
| strokeText() |
The CanvasRenderingContext2D method strokeText(), part of the Canvas 2D API, strokes — that is, draws
the outlines of — the characters of a text string at the specified coordinates. An optional parameter
allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing
the text or by using a lower font size.
This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. |
| transform() |
The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current
transformation with the matrix described by the arguments of this method. This lets you scale,
rotate, translate (move), and skew the context.
|
| translate() |
The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation
transformation to the current matrix.
|
Some Examples
Drawing some simple rectangles:
.myCanvas { background-color:#f6f6f6; }
<canvas class="myCanvas"> <p>Description of the canvas for those unable to view it.</p> </canvas>
window.addEventListener("DOMContentLoaded", (event) => { const canvas = document.querySelector(".myCanvas"); const width = canvas.width = (window.innerWidth/2); const height = canvas.height = (window.innerHeight/2); const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, width, height); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(50, 50, 100, 150); ctx.fillStyle = "rgb(0, 255, 0)"; ctx.fillRect(75, 75, 100, 100); ctx.fillStyle = "rgba(255, 0, 255, 0.75)"; ctx.fillRect(25, 100, 175, 50); ctx.lineWidth = 5; ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.strokeRect(25, 25, 175, 200); });
Graphing An Algebraic Function
Drawing Paths
If you want to draw anything more complex than a rectangle, you need to draw a path. Basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. Canvas includes functions for drawing straight lines, circles, Bézier curves, and more.