Skip to main content

Canvas Support

The Canvas 2D API is a feature in webf/browser that enables drawing and manipulating graphics directly in an HTML canvas element using JavaScript.

This provides a way to render graphics, animations, and even games without relying on plugins or external tools.

Canvas Element

The starting point is the <canvas> HTML element, which creates a blank canvas that you can draw upon:

<canvas id="myCanvas" width="400" height="200"></canvas>

This creates a canvas of 400 pixels in width and 200 pixels in height.

However, displaying the canvas element by itself will not show anything besides a blank rectangle (or sometimes nothing at all, unless given a border or background).

Drawing on the Canvas

To draw on the canvas, you use JavaScript and the Canvas API. The key object here is the 2D rendering context, which you can obtain from any canvas element.

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

Drawing Commands


  • beginPath(): Resets the current path.
  • closePath(): Connects the last point in the path to the starting point.
  • moveTo(x, y): Moves the pen to the specified coordinates without drawing.
  • lineTo(x, y): Draws a line from the current position to the specified coordinates.
  • arc(x, y, radius, startAngle, endAngle, antiClockwise): Draws an arc or a section of a circle. If the antiClockwise argument is true, the arc is drawn counterclockwise; otherwise, it's drawn clockwise.
  • arcTo(x1, y1, x2, y2, radius): Draws an arc using control points and a radius.
  • quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve.
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve.

Drawing Styles:

  • fillStyle: Property to set the color, gradient, or pattern to fill shapes.
  • strokeStyle: Property to set the color, gradient, or pattern for shape outlines.
  • createLinearGradient(x1, y1, x2, y2): Creates a linear gradient object.
  • createRadialGradient(x1, y1, r1, x2, y2, r2): Creates a radial (or circular) gradient object.
  • createPattern(image, type): Creates a pattern using a specified image (or another canvas) and repetition type ("repeat", "repeat-x", "repeat-y", or "no-repeat").
    • CanvasPattern.setTransform currently not supported.

Drawing Shapes:

  • fill(): Fills the current path.
  • stroke(): Outlines the current path.
  • clearRect(x, y, width, height): Clears the specified rectangular area, making it transparent.
  • fillRect(x, y, width, height): Draws a filled rectangle.
  • strokeRect(x, y, width, height): Draws a rectangular outline.


  • font: Property to set the current font properties.
  • textAlign: Property to set the text alignment ("start", "end", "left", "right", or "center").
  • textBaseline: Property to set the baseline alignment ("top", "hanging", "middle", "alphabetic", "ideographic", or "bottom").
  • fillText(text, x, y, [maxWidth]): Fills a text string at the specified coordinates.
  • strokeText(text, x, y, [maxWidth]): Outlines a text string at the specified coordinates.
  • measureText(text): Returns a TextMetrics object containing information about the width of the text.

Image Drawing:

  • drawImage(image, dx, dy, [dWidth, dHeight]): Draws an image, video frame, or another canvas onto the canvas. This method has multiple overloads to support cropping and scaling.

Global Composite Operations:

  • globalAlpha: Property to set the global transparency level.
  • globalCompositeOperation: Property to set how shapes and images are drawn onto the existing content. Common values include "source-over", "destination-over", "multiply", "screen", etc.

Line Styles:

  • lineCap: Property to set the end style of lines ("butt", "round", or "square").
  • lineJoin: Property to set the corner style of paths ("bevel", "round", or "miter").
  • lineWidth: Property to set the width of lines.
  • setLineDash(segments): Sets the current line dash pattern.
  • getLineDash(): Returns the current line dash pattern.
  • lineDashOffset: Property to set the offset for the line dash pattern.


  • scale(x, y): Scales the canvas units.
  • rotate(angle): Rotates the canvas around the current origin.
  • translate(x, y): Moves the canvas origin to a different point.
  • transform(a, b, c, d, e, f): Multiplies the current transformation matrix with the given matrix.
  • setTransform(a, b, c, d, e, f): Resets the current transform to the identity and then invokes transform().
  • resetTransform(): Resets the current transform to the identity matrix.

Other Commands:

  • clip(): Clips the region using the current path.
  • save(): Saves the current drawing state to a stack.
  • restore(): Restores the drawing state from the stack.
  • isPointInPath(x, y): Checks if the given point is inside the current path.
  • isPointInStroke(x, y): Checks if the given point is on the path's stroke.