The constructed Canvas.
The 2D context for the Canvas.
Gets the anti-aliasing mode.
This is a canvas extension.
The current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
The alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
The image height of this canvas
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();
Gets the pattern quality.
This is a canvas extension.
Gets the text drawing mode.
This is a canvas extension.
The font height
Returns the current transformation matrix being applied to the context.
The image width of this canvas
For PDF canvases, adds another page.
Optional width: numberThe width of the new PDF page, defaults to the canvas's initial width.
Optional height: numberThe height of the new PDF page, defaults to the canvas's initial height.
This is a 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 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.
Gets a JPEG buffer.
Optional config: JpegConfigThe render configuration.
A JPEG buffer.
jpegAsync for the async version.
Gets a JPEG buffer.
Optional config: JpegConfigThe render configuration.
A JPEG buffer.
jpeg for the sync 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 config: PdfConfigThe render configuration.
A PDF buffer.
pdfAsync for the async version.
Gets a PDF buffer.
Optional config: PdfConfigThe render configuration.
A PDF buffer.
pdf for the sync version.
Gets a PNG buffer.
Optional config: PngConfigThe render configuration.
A PNG buffer.
pngAsync for the async version.
Gets a PNG buffer.
Optional config: PngConfigThe render configuration.
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: PrintCircularOptionsAdd 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 resolveSets 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.
Set the text drawing mode. Using glyph is much faster than path for drawing, and when using a PDF context will embed the text natively, so will be selectable and lower file size. The downside is that cairo does not have any subpixel precision for glyph, so this will be noticeably lower quality for text positioning in cases such as rotated text. Also, strokeText in glyph will act the same as fillText, except using the stroke style for the fill.
The drawing mode.
This is a 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: DOMMatrixFor image canvases, encodes the canvas as a PNG. For PDF canvases, encodes the canvas as a PDF. For SVG canvases, encodes the canvas as an SVG.
Encodes the canvas as a PNG.
the standard MIME type for the image format to return.
Optional config: PngConfigThe render configuration.
Encodes the canvas as a JPG.
the standard MIME type for the image format to return.
Optional config: JpegConfigThe render configuration.
Encodes the canvas as a PDF.
the standard MIME type for the image format to return.
Optional config: PdfConfigThe render configuration.
Returns the unencoded pixel data, top-to-bottom. On little-endian (most) systems, the array will be ordered BGRA; on big-endian systems, it will be ARGB.
the standard MIME type for the image format to return.
For image canvases, encodes the canvas as a PNG. For PDF canvases, encodes the canvas as a PDF. For SVG canvases, encodes the canvas as an SVG.
Encodes the canvas as a PNG.
the standard MIME type for the image format to return.
Optional config: PngConfigThe render configuration.
Encodes the canvas as a JPG.
the standard MIME type for the image format to return.
Optional config: JpegConfigThe render configuration.
Encodes the canvas as a PDF.
the standard MIME type for the image format to return.
Optional config: PdfConfigThe render configuration.
Render the canvas into a PNG Data URL.
Render the canvas into a PNG Data URL.
Render the canvas into a JPEG Data URL.
Optional quality: numberThe quality for the JPEG.
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
Initialize canvas-constructor with
canvas.