The 2D context for the Canvas.
The current text direction used to draw text.
The current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
Returns the canvas's current CSS3 font-variant.
The alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
The image height of this canvas
Whether scaled images are smoothed (true, default) or not (false).
The quality of image smoothing.
A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number, when setting the elements, was odd, the elements of the array get copied and concatenated. For example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getLineDash
new Canvas(400, 300)
.beginPath()
.setLineDash([5, 15])
.moveTo(0, 50)
.lineTo(400, 50)
.stroke()
.png();
Returns the pages created with addPage.
This is a skia-canvas extension.
The font height
Returns the text tracking property.
Returns whether or not text-wrap is enabled.
Returns the current transformation matrix being applied to the context.
The image width of this canvas
Creates a new page for the canvas, which can be retrieved later with pages.
The width of the new page.
The height of the new page.
A new instance of NativeCanvas with the new context.
This is a skia-canvas extension.
Adds an arc to the path which is centered at (X, Y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
The X coordinate of the arc's center.
The Y coordinate of the arc's center.
The arc's radius.
The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
Optional anticlockwise: booleanAn optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
The x axis of the coordinate for the first control point.
The y axis of the coordinate for the first control point.
The x axis of the coordinate for the second control point.
The y axis of the coordinate for the second control point.
The arc's radius.
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
The x axis of the coordinate for the first control point.
The y axis of the coordinate for first control point.
The x axis of the coordinate for the second control point.
The y axis of the coordinate for the second control point.
The x axis of the coordinate for the end point.
The y axis of the coordinate for the end point.
Clear a circle.
The position x in the center of the clip's circle.
The position y in the center of the clip's circle.
The radius for the clip.
The degree in radians to start drawing the circle.
The degree in radians to finish drawing the circle, defaults to a full circle.
Whether or not the angle should be anti-clockwise.
Turns the path currently being built into the current clipping path.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Turns the path currently being built into the current clipping path.
The path to use.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Create a round clip.
The position x in the center of the clip's circle.
The position y in the center of the clip's circle.
The radius for the clip.
Optional start: numberThe degree in radians to start drawing the circle.
Optional angle: numberThe degree in radians to finish drawing the circle, defaults to a full circle.
Optional antiClockwise: booleanWhether the path should be anti-clockwise.
createRoundPath
Create a round path.
The position x in the center of the clip's circle.
The position y in the center of the clip's circle.
The radius for the clip.
The degree in radians to start drawing the circle.
The degree in radians to finish drawing the circle, defaults to a full circle.
Whether the path should be anti-clockwise.
Creates a radial gradient around a point with given coordinates.
The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
The x-axis coordinate of the centre of the gradient.
The y-axis coordinate of the centre of the gradient.
The gradient steps.
Creates an ellipse clip which is centered at (X, Y) position with the radius radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
The x axis of the coordinate for the ellipse's center.
The y axis of the coordinate for the ellipse's center.
The ellipse's major-axis radius.
The ellipse's minor-axis radius.
The rotation for this ellipse, expressed in radians.
The starting point, measured from the x axis, from which it will be drawn, expressed in radians.
The end ellipse's angle to which it will be drawn, expressed in radians.
Optional anticlockwise: booleanAn optional Boolean which, if true, draws the ellipse anticlockwise (counter-clockwise), otherwise in a clockwise direction.
Adds an ellipse to the path which is centered at (X, Y) position with the radius radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
The x axis of the coordinate for the ellipse's center.
The y axis of the coordinate for the ellipse's center.
The ellipse's major-axis radius.
The ellipse's minor-axis radius.
The rotation for this ellipse, expressed in radians.
The starting point, measured from the x axis, from which it will be drawn, expressed in radians.
The end ellipse's angle to which it will be drawn, expressed in radians.
Optional anticlockwise: booleanAn optional Boolean which, if true, draws the ellipse anticlockwise (counter-clockwise), otherwise in a clockwise direction.
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
The width to give the new ImageData object. A negative value flips the rectangle around the vertical axis.
The height to give the new ImageData object. A negative value flips the rectangle around the horizontal axis.
Optional settings: ImageDataSettingsThe settings to be used.
Creates a new, blank ImageData object with the dimensions of the specified object. All of the pixels in the new object are transparent black.
An existing ImageData object from which to copy the width and height. The image itself is not copied.
Creates a gradient along the line given by the coordinates represented by the parameters. The coordinates are global, the second point does not rely on the position of the first and vice versa.
The x axis of the coordinate of the start point.
The y axis of the coordinate of the start point.
The x axis of the coordinate of the end point.
The y axis of the coordinate of the end point.
The gradient steps.
Creates a pattern using the specified image. It repeats the source in the directions specified by the repetition argument, and returns it.
A Canvas Image to be used as the image to repeat.
The repeat mode.
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
The x axis of the coordinate of the start circle.
The y axis of the coordinate of the start circle.
The radius of the start circle.
The x axis of the coordinate of the end circle.
The y axis of the coordinate of the end circle.
The radius of the end circle.
The gradient steps.
Create a beveled clip.
The position x to start drawing clip.
The position y to start drawing clip.
The width of clip.
The height of clip.
The radius for clip's rounded borders.
// Radius argument, fill the content
new Canvas(200, 200)
.createRoundedClip(0, 0, 200, 50, 35)
.fill()
.png();
// Configured bevels
new Canvas(200, 200)
.createRoundedClip(0, 0, 200, 50, {
// Top left border
tl: 15,
// Top right border
tr: 20,
// Bottom left border
bl: 5,
// Bottom right border
br: 10
})
// Add an image with the shape of the beveled clip using different borders
.printImage(buffer, 0, 0, 200, 50)
.png();
// Top bevels only
new Canvas(200, 200)
.createRoundedClip(0, 0, 200, 50, { tl: 20, tr: 20, bl: 0, br: 0 })
.printImage(buffer, 0, 0, 200, 50)
.png();
Create a beveled path.
The position x to start drawing clip.
The position y to start drawing clip.
The width of clip.
The height of clip.
The radius for clip's rounded borders.
Fills the current or given path with the current fill style using the non-zero or even-odd winding rule.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Fills the current or given path with the current fill style using the non-zero or even-odd winding rule.
The path to fill.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the entire Canvas. This method is not affected by the canvas transformation matrix.
Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height. This method is not affected by the canvas transformation matrix.
The X coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
The Y coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
The width of the rectangle from which the ImageData will be extracted.
The height of the rectangle from which the ImageData will be extracted.
Reports whether or not the specified point is contained in the current path.
The X coordinate of the point to check.
The Y coordinate of the point to check.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Reports whether or not the specified point is contained in the given path.
The Path2D to check against.
The X coordinate of the point to check.
The Y coordinate of the point to check.
Optional fillRule: CanvasFillRuleThe algorithm by which to determine if a point is inside a path or outside a path.
Reports whether or not the specified point is inside the area contained by the stroking of the current path.
The X coordinate of the point to check.
The Y coordinate of the point to check.
Reports whether or not the specified point is inside the area contained by the stroking of the given path.
The Path2D to check against.
The X coordinate of the point to check.
The Y coordinate of the point to check.
Gets a JPEG buffer.
Optional options: RenderOptionsThe render options.
A JPEG buffer.
jpegAsync for the async version.
Measure a text's width given a string.
The text to measure.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText
const size = new Canvas(500, 400)
.setTextFont('40px Tahoma')
.measureText('Hello World!'); // Returns a number
const newSize = size.width < 500 ? 40 : (500 / size.width) * 40;
new Canvas(500, 400)
.setTextFont(`${newSize}px Tahoma`)
.printText('Hello World!', 30, 50)
.png(); // Returns a Buffer
new Canvas(500, 400)
.setTextFont('40px Tahoma')
.process((canvas) => {
const size = canvas.measureText('Hello World!');
const newSize = size.width < 500 ? 40 : (500 / size.width) * 40;
this.setTextFont(`${newSize}px Tahoma`);
})
.printText('Hello World!', 30, 50)
.png(); // Returns a Buffer
Protected parseGets a PDF buffer.
Optional options: RenderOptionsThe render options.
A PDF buffer.
pdfAsync for the async version.
Gets a PNG buffer.
Optional options: RenderOptionsThe render options.
A PNG buffer.
pngAsync for the async version.
Gets a PNG buffer.
Optional options: RenderOptionsThe render options.
A PNG buffer.
png for the sync version.
Add a round image.
The image.
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
The radius for the circle
Optional options: PrintCircularOptionsCreates a radial gradient given by the coordinates of the two circles represented by the parameters. This method is chainable and calls setColor after creating the gradient.
The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
The x-axis coordinate of the centre of the gradient.
The y-axis coordinate of the centre of the gradient.
Optional steps: readonly GradientStop[]The gradient steps.
Creates a radial gradient around a point with given coordinates. This method is chainable and calls setStroke after creating the gradient.
The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
The x-axis coordinate of the centre of the gradient.
The y-axis coordinate of the centre of the gradient.
Optional steps: readonly GradientStop[]The gradient steps.
Add an image at a position (x, y) with the source image's width and height.
The image.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
Add an image at a position (x, y) with a given width and height.
The image.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The width to draw the image in the destination canvas. This allows scaling of the drawn image.
The height to draw the image in the destination canvas. This allows scaling of the drawn image.
Add an image at a position (x, y) with a given width and height, from a specific source rectangle.
The image.
The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
The width of the sub-rectangle of the source image to draw into the destination context.
The height of the sub-rectangle of the source image to draw into the destination context.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The width to draw the image in the destination canvas. This allows scaling of the drawn image.
The height to draw the image in the destination canvas. This allows scaling of the drawn image.
Creates a gradient along the line given by the coordinates represented by the parameters. The coordinates are global, the second point does not rely on the position of the first and vice versa. This method is chainable and calls setColor after creating the gradient.
The x axis of the coordinate of the start point.
The y axis of the coordinate of the start point.
The x axis of the coordinate of the end point.
The y axis of the coordinate of the end point.
Optional steps: readonly GradientStop[]The gradient steps.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
new Canvas(200, 200)
.printLinearColorGradient(0, 0, 200, 50, [
{ position: 0, color: 'white' },
{ position: 0.25, color: 'red' },
{ position: 0.5, color: 'blue' }
])
.printRectangle(10, 10, 200, 100)
Creates a gradient along the line given by the coordinates represented by the parameters. The coordinates are global, the second point does not rely on the position of the first and vice versa. This method is chainable and calls setStroke after creating the gradient.
The x axis of the coordinate of the start point.
The y axis of the coordinate of the start point.
The x axis of the coordinate of the end point.
The y axis of the coordinate of the end point.
Optional steps: readonly GradientStop[]The gradient steps.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
new Canvas(200, 200)
.printLinearStrokeGradient(0, 0, 200, 50, [
{ position: 0, color: 'white' },
{ position: 0.25, color: 'red' },
{ position: 0.5, color: 'blue' }
])
.printRectangle(10, 10, 200, 100)
Add text with line breaks (node-canvas and web canvas compatible)
The text to write.
The position x to start drawing the element.
The position y to start drawing the element.
new Canvas(400, 300)
.setTextFont('25px Tahoma')
.printMultilineText('This is a really\nlong text!', 139, 360)
.png();
Creates a pattern using the specified image. It repeats the source in the directions specified by the repetition argument, and prints it.
A Canvas Image to be used as the image to repeat.
The repeat mode.
Creates a radial gradient given by the coordinates of the two circles represented by the parameters. This method is chainable and calls setColor after creating the gradient.
The x axis of the coordinate of the start circle.
The y axis of the coordinate of the start circle.
The radius of the start circle.
The x axis of the coordinate of the end circle.
The y axis of the coordinate of the end circle.
The radius of the end circle.
Optional steps: readonly GradientStop[]The gradient steps.
Creates a radial gradient given by the coordinates of the two circles represented by the parameters. This method is chainable and calls setStroke after creating the gradient.
The x axis of the coordinate of the start circle.
The y axis of the coordinate of the start circle.
The radius of the start circle.
The x axis of the coordinate of the end circle.
The y axis of the coordinate of the end circle.
The radius of the end circle.
Optional steps: readonly GradientStop[]The gradient steps.
Add responsive text
The text to write.
The position x to start drawing the element.
The position y to start drawing the element.
The max length in pixels for the text.
new Canvas(400, 300)
.setTextFont('40px Tahoma')
.printResponsiveText('Hello World', 30, 30, 50)
.png();
Add a beveled image.
The image.
The position x to start drawing the element.
The position y to start drawing the element.
The width of the element.
The height of the element.
The radius for the new image.
Add a beveled rectangle.
The position x to start drawing the element.
The position y to start drawing the element.
The width of the element.
The height of the element.
The radius for the bevels.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
// Radius argument
new Canvas(200, 200)
.printRoundedRectangle(0, 0, 200, 50, 35)
.png();
// Configured bevels
new Canvas(200, 200)
.printRoundedRectangle(0, 0, 200, 50, {
// Top left border
tl: 15,
// Top right border
tr: 20,
// Bottom left border
bl: 5,
// Bottom right border
br: 10
})
.png();
// Top bevels only
new Canvas(200, 200)
.printRoundedRectangle(0, 0, 200, 50, { tl: 20, tr: 20, bl: 0, br: 0 })
.png();
Paints a rectangle which has a starting point at (X, Y) and has a w width and an h height onto the canvas, using the current stroke style.
The x axis of the coordinate for the rectangle starting point.
The y axis of the coordinate for the rectangle starting point.
The rectangle's width.
The rectangle's height.
Add stroked text.
The text to write.
The position x to start drawing the element.
The position y to start drawing the element.
Optional maxWidth: numberThe maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font.
Add a text.
The text to write.
The position x to start drawing the element.
The position y to start drawing the element.
Optional maxWidth: numberThe maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font.
Wrap the text in multiple lines and write it
The text to wrap and write.
The position x to start drawing the element.
The position y to start drawing the element.
The width in pixels of the line wrap
new Canvas(400, 300)
.setTextFont('25px Tahoma')
.printWrappedText('This is a really long text!', 139, 360)
.png();
Process data with this as the context
The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the bitmap. This method is not affected by the canvas transformation matrix.
An ImageData object containing the array of pixel values.
Horizontal position (x-coordinate) at which to place the image data in the destination canvas.
Vertical position (y-coordinate) at which to place the image data in the destination canvas.
The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the bitmap. Only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.
An ImageData object containing the array of pixel values.
Horizontal position (x-coordinate) at which to place the image data in the destination canvas.
Vertical position (y-coordinate) at which to place the image data in the destination canvas.
Horizontal position (x-coordinate). The X coordinate of the top left hand corner of your Image data. Defaults to 0.
Vertical position (y-coordinate). The Y coordinate of the top left hand corner of your Image data. Defaults to 0.
Width of the rectangle to be painted. Defaults to the width of the image data.
Height of the rectangle to be painted. Defaults to the height of the image data.
Adds a quadratic Bézier curve to the path. It requires two points. The first point is a control point and the second one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.
The x axis of the coordinate for the control point.
The y axis of the coordinate for the control point.
The x axis of the coordinate for the end point.
The y axis of the coordinate for the end point.
Sets the shadow blur and offsets to zero, then sets the shadow color to transparent. If shadows are not longer
used in a canvas and performance is critical, .setShadowColor('transparent') should be used instead, as of the
note from Mozilla Developer Network.
new Canvas(500, 500)
// Set a shadow color and blur
.setShadowColor('rgba(23, 23, 23, 0.2)')
.setShadowBlur(5)
// Render the text with a blow effect
.printText('Hello', 30, 50)
// Reset the shadows
.resetShadows()
// Render the text without shadows
.printText('World!', 30, 100);
Protected resolveTakes a file path and writes the canvas's current contents to disk. If the filename ends with an extension that makes its format clear, the second argument is optional. If the filename is ambiguous, you can pass an options object with a format string using names like "png" and "jpeg" or a full mime type like "application/pdf".
The way multi-page documents are handled depends on the filename argument. If the filename contains the string "{}", it will be used as template for generating a numbered sequence of files—one per page. If no curly braces are found in the filename, only a single file will be saved. That single file will be multi-page in the case of PDF output but for other formats it will contain only the most recently added page.
An integer can optionally be placed between the braces to indicate the number of padding characters to use for numbering. For instance "page-{}.svg" will generate files of the form page-1.svg whereas "frame-{4}.png" will generate files like frame-0001.png.
Optional options: SaveAsOptionsThe options for the image render.
Takes a file path and writes the canvas's current contents to disk. If the filename ends with an extension that makes its format clear, the second argument is optional. If the filename is ambiguous, you can pass an options object with a format string using names like "png" and "jpeg" or a full mime type like "application/pdf".
The way multi-page documents are handled depends on the filename argument. If the filename contains the string "{}", it will be used as template for generating a numbered sequence of files—one per page. If no curly braces are found in the filename, only a single file will be saved. That single file will be multi-page in the case of PDF output but for other formats it will contain only the most recently added page.
An integer can optionally be placed between the braces to indicate the number of padding characters to use for numbering. For instance "page-{}.svg" will generate files of the form page-1.svg whereas "frame-{4}.png" will generate files like frame-0001.png.
Optional options: SaveAsOptionsThe options for the image render.
Sets the canvas's CSS3 font-variant.
The CSS3 font-variant value to be set.
The font-variant does not persist between font changes. Additionally, you can use fontVariant.
This is a skia-canvas extension.
Sets the line dash pattern used when stroking lines, using an array of values which specify alternating lengths of lines and gaps which describe the pattern.
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. If the array is empty, the line dash list is cleared and line strokes return to being solid.
Determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).
The line join type.
Sets the miter limit ratio in space units. When getting, it returns the current value (10.0 by default). When setting, zero, negative, Infinity and NaN values are ignored; otherwise the current value is set to the new value.
A number specifying the miter limit ratio in space units. Zero, negative, Infinity and NaN values are ignored.
Sets the text tracking property in the canvas.
An integer representing the amount of space to add/remove in terms of 1/1000’s of an ‘em’
(a.k.a. the current font size). Positive numbers will space out the text (e.g., 100 is a good value for
setting all-caps) while negative values will pull the letters closer together (this is only rarely a good
idea).
The tracking value defaults to 0 and settings will persist across font changes.
This is a skia-canvas extension.
Sets whether or not Skia's text-wrap system should be enabled. Setting to true has the following effects:
However, when set to false (default), the text-drawing methods will never choose a more-condensed weight or
otherwise attempt to squeeze your entire string into the measure specified by width. Instead the text will be
typeset up through the last word that fits and the rest will be omitted.
Whether text wrap should be enabled or not.
This is a skia-canvas extension.
Resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method.
Horizontal scaling.
Horizontal skewing.
Vertical skewing.
Vertical scaling.
Horizontal moving.
Vertical moving.
Resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method.
Optional transform: DOMMatrixGets a SVG buffer.
Optional options: RenderOptionsThe render options.
A SVG buffer.
svgAsync for the async version.
Renders the canvas into a buffer with the specified format.
The format to use for the image. An @ suffix can be added to the format string to specify a
pixel-density (for instance, "jpg@2x").
Optional options: RenderOptionsThe render options.
Renders the canvas into a buffer with the specified format.
The format to use for the image. An @ suffix can be added to the format string to specify a
pixel-density (for instance, "jpg@2x").
Optional options: RenderOptionsThe render options.
Render the canvas into a data URL with the specified format.
The image format the data URL must have.
Optional options: RenderOptionsThe render options.
Wraps a text into a width-limited multi-line text.
The text to wrap
The wrap width
// Calculate the wrapped text and return it, which
// is useful for storage to avoid re-calculating the
// wrapped text
const wrappedText = new Canvas(500, 300)
.setTextFont('48px Verdana')
.wrapText('Hello World, this is a quite\nlong text.', 300);
// Wrap the text and add it
const buffer = new Canvas(500, 300)
.setTextFont('48px Verdana')
.process((canvas) => {
const wrappedText = canvas.wrapText('Hello World, this is a quite\nlong text.');
return canvas
.setTextAlign('center')
.addMultilineText(wrappedText, 250, 50)
})
.png(); // Returns a Buffer
Generated using TypeDoc
The constructed Canvas.