The color, gradient, or pattern to use inside shapes.
#000 (black)
canvas.fillStyle = 'cyan' // Named colors
canvas.fillStyle = '#0ff' // Hex colors
canvas.fillStyle = 'rgb(0, 255, 255)' // RGB colors
canvas.fillStyle = 'rgba(0, 255, 255, 1)' // RGBA colors
canvas.fillStyle = 'hsla(210 60% 60%)' // HSLA colors
canvas.fillStyle = (() => { // Gradient
const gradient = canvas.createLinearGradient(20, 70, 70, 70)
gradient.addColorStop(0, 'rgb(255,0,0)')
gradient.addColorStop(0.5, 'rgb(0,255,0)')
gradient.addColorStop(1, 'rgb(0,0,255)')
return gradient
})()
The current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
You can see the full list of available fonts with fc-list : family shell command.
The alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
1.0
The type of compositing operation to apply when drawing new shapes.
"source-over"
Readonly heightThe height of the canvas.
The shape used to draw the end points of lines.
"butt"
The current line dash pattern.
[]
The shape used to join two line segments where they meet.
"miter"
The thickness of lines.
1.0
The miter limit ratio.
0
The amount of blur applied to shadows.
0 (no blur)
Optional shadowThe color of shadows.
undefined
The distance that shadows will be offset horizontally.
0 (no horizontal offset)
The distance that shadows will be offset vertically..
0 (no vertical offset)
The color, gradient, or pattern to use for the strokes (outlines) around shapes.
#000 (black)
The current text alignment used when drawing text.
"left"
The current text baseline used when drawing text.
"alphabetic"
Readonly widthThe width of the canvas.
Adds a circular arc to the current sub-path.
The horizontal coordinate of the arc's center.
The vertical coordinate of the arc's center.
The arc's radius. Must be positive.
The angle at which the arc starts in radians, measured from the positive x-axis.
The angle at which the arc ends in radians, measured from the positive x-axis.
If true, draws the arc counter-clockwise between the start and end angles.
const canvas = new Canvas(100, 100)
canvas.beginPath()
canvas.arc(100, 75, 50, 0, 2 * Math.PI)
canvas.stroke()
const output = new Output(canvas, 'arc.png')
output.addToQueue()
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 Canvas.moveTo before creating the Bézier curve.
The x-axis coordinate of the first control point.
The y-axis coordinate of the first control point.
The x-axis coordinate of the second control point.
The y-axis coordinate of the second control point.
The x-axis coordinate of the end point.
The y-axis coordinate of the end point.
const canvas = new Canvas(100, 100)
canvas.moveTo(0, 0)
canvas.bezierCurveTo(60, 80, 90, 10, 100, 100)
canvas.stroke()
const output = new Output(canvas, 'bezierCurveTo.png')
output.addToQueue()
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
Creates a gradient along the line connecting two given coordinates.
The x-axis coordinate of the start point.
The y-axis coordinate of the start point.
The x-axis coordinate of the end point.
The y-axis coordinate of the end point.
const canvas = new Canvas(150, 150)
const gradient = canvas.createLinearGradient(0, 0, 150, 150)
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.5, 'green')
gradient.addColorStop(1, 'blue')
canvas.fillStyle = gradient
canvas.fillRect(0, 0, 150, 150)
const output = new Output(canvas, 'linearGradient.png')
output.addToQueue()
Creates a pattern using the specified image and repetition.
This method works but it seems that the use of PatternObject is still in-development. Neither of Canvas.fillStyle and Canvas.strokeStyle accept PatternObject as a value.
Creates a radial gradient using the size and coordinates of two circles.
The x-axis coordinate of the start circle.
The y-axis coordinate of the start circle.
The radius of the start circle. Must be non-negative and finite.
The x-axis coordinate of the end circle.
The y-axis coordinate of the end circle.
The radius of the end circle. Must be non-negative and finite.
const canvas = new Canvas(150, 150)
const gradient = canvas.createRadialGradient(75, 75, 10, 75, 75, 150)
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.5, 'green')
gradient.addColorStop(1, 'blue')
canvas.fillStyle = gradient
canvas.fillRect(0, 0, 150, 150)
const output = new Output(canvas, 'radialGradient.png')
output.addToQueue()
Provides different ways to draw an image onto the canvas.
The image to draw into the canvas.
// sips -j draw.js image.png
const canvas = new Canvas(100, 100)
canvas.drawImage(sips.images.pop())
const output = new Output(canvas, 'draw.png')
output.addToQueue()
Provides different ways to draw an image onto the canvas.
The image to draw into the canvas.
Horizontal position (x coordinate) at which to place the image in the canvas.
Vertical position (y coordinate) at which to place the image in the canvas.
// sips -j draw.js image.png
const canvas = new Canvas(100, 100)
canvas.drawImage(sips.images.pop(), 10, 10)
const output = new Output(canvas, 'draw.png')
output.addToQueue()
Provides different ways to draw an image onto the canvas.
The image to draw into the canvas.
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.
// sips -j draw.js image.png
const canvas = new Canvas(100, 100)
canvas.drawImage(sips.images.pop(), 10, 10, 10, 10)
const output = new Output(canvas, 'draw.png')
output.addToQueue()
Provides different ways to draw an image onto the canvas.
The image to draw into the canvas.
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.
// sips -j draw.js image.png
const canvas = new Canvas(100, 100)
canvas.drawImage(sips.images.pop(), 25, 25, 50, 50, 10, 10, 10, 10)
const output = new Output(canvas, 'draw.png')
output.addToQueue()
Fills the current or given path with the current Canvas.fillStyle.
Draws a rectangle that is filled according to the current Canvas.fillStyle.
Draws a text string at the specified coordinates, filling the string's characters with the current Canvas.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.
The text string to render into canvas.
The x-axis coordinate of the point at which to begin drawing text, in pixels.
The y-axis coordinate of the point at which to begin drawing text, in pixels.
The maximum number of pixels wide the text may be once rendered.
const canvas = new Canvas(100, 50)
canvas.font = '42pt Futura'
canvas.fillStyle = 'blue'
canvas.fillText('Hello', 0, 42)
const output = new Output(canvas, 'fillText.png')
output.addToQueue()
A drawing context on the canvas.
Contrary to DOM API, Context object is identical to Canvas object.
It always returns itself.
Returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
Optional sx: numberThe x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
Optional sy: numberThe y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
Optional sw: numberThe width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
Optional sh: numberThe height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.
Reports whether or not the specified point is contained in the current path.
The x-axis coordinate of the point to check, unaffected by the current transformation of the context.
The y-axis coordinate of the point to check, unaffected by the current transformation of the context.
Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
The x-axis coordinate of the line's end point.
The y-axis coordinate of the line's end point.
const canvas = new Canvas(100, 100)
canvas.moveTo(0, 0)
canvas.lineTo(100, 100)
canvas.stroke()
const output = new Output(canvas, 'lineTo.png')
output.addToQueue()
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.
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 Canvas.moveTo before creating the quadratic Bézier curve.
The x-axis coordinate of the control point.
The y-axis coordinate of the control point.
The x-axis coordinate of the end point.
The y-axis coordinate of the end point.
const canvas = new Canvas(100, 100)
canvas.moveTo(0, 0)
canvas.quadraticCurveTo(0, 100, 100, 100)
canvas.stroke()
const output = new Output(canvas, 'quadraticCurveTo.png')
output.addToQueue()
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 Canvas.fill or Canvas.stroke methods.
const canvas = new Canvas(100, 100)
canvas.rect(0, 0, 50, 50)
canvas.fillStyle = 'green'
canvas.fill()
const output = new Output(canvas, 'rect.png')
output.addToQueue()
Adds a rotation to the transformation matrix.
The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree.
const canvas = new Canvas(50, 50)
canvas.rotate(45 * Math.PI / 180)
canvas.fillRect(30, 0, 10, 10)
const output = new Output(canvas, 'rotate.png')
output.addToQueue()
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.
Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.
const canvas = new Canvas(50, 50)
canvas.scale(3, 4)
canvas.fillRect(0, 0, 10, 10)
const output = new Output(canvas, 'scale.png')
output.addToQueue()
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.
[ a c e
b d f
0 0 1 ]
(m11) Horizontal scaling. A value of 1 results in no scaling.
(m12) Vertical scaling.
(m21) Horizontal scaling.
(m22) Vertical scaling. A value of 1 results in no scaling.
(dx) Horizontal translation (moving).
(dy) Vertical translation (moving).
const canvas = new Canvas(100, 100)
canvas.setTransform(1, 0.2, 0.8, 1, 0, 0)
canvas.fillRect(0, 0, 50, 50)
const output = new Output(canvas, 'transform.png')
output.addToQueue()
Strokes (outlines) the current or given path with the current Canvas.strokeStyle.
Draws a rectangle that is stroked (outlined) according to the current Canvas.strokeStyle and other context settings.
Draws the outlines of the characters of a text string at the specified coordinates.
The text string to render into canvas.
The x-axis coordinate of the point at which to begin drawing text, in pixels.
The y-axis coordinate of the point at which to begin drawing text, in pixels.
const canvas = new Canvas(100, 50)
canvas.font = '42pt Futura'
canvas.strokeStyle = 'blue'
canvas.strokeText('Hello', 0, 42)
const output = new Output(canvas, 'strokeText.png')
output.addToQueue()
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.
The transformation matrix is described by:
[ a c e
b d f
0 0 1 ]
(m11) Horizontal scaling. A value of 1 results in no scaling.
(m12) Vertical scaling.
(m21) Horizontal scaling.
(m22) Vertical scaling. A value of 1 results in no scaling.
(dx) Horizontal translation (moving).
(dy) Vertical translation (moving).
const canvas = new Canvas(100, 100)
canvas.transform(1, 0.2, 0.8, 1, 0, 0)
canvas.fillRect(0, 0, 50, 50)
const output = new Output(canvas, 'transform.png')
output.addToQueue()
Adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.
Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
Distance to move in the vertical direction. Positive values are down, and negative are up.
const canvas = new Canvas(50, 50)
canvas.translate(25, 25)
canvas.fillRect(0, 0, 10, 10)
const output = new Output(canvas, 'translate.png')
output.addToQueue()
Generated using TypeDoc
The
Canvasclass provides the 2D rendering context for the drawing images. It is used for drawing shapes, text, images, and other objects.