Interface ICanvasRenderingContext
Hierarchy
- ICanvasRenderingContext
Index
Properties
Methods
Properties
Readonly canvasSearch playground for canvas
canvas is a read-only reference to ICanvas.
fill
Color or style to use inside shapes. Default #000 (black).
fontSearch playground for font
Font setting. Default value 10px sans-serif.
global
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
line
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
line
Width of lines. Default 1.0.
miter
Miter limit ratio. Default 10.
shadow
Specifies the blurring effect. Default: 0.
shadow
Color of the shadow. Default: fully-transparent black.
shadow
Horizontal distance the shadow will be offset. Default: 0.
shadow
Vertical distance the shadow will be offset. Default: 0.
stroke
Color or style to use for the lines around shapes. Default #000 (black).
Methods
arcSearch playground for arc
Adds a circular arc to the current path.
Parameters
x: number
The horizontal coordinate of the arc's center.
y: number
The vertical coordinate of the arc's center.
radius: number
The arc's radius. Must be positive.
startAngle: number
The angle at which the arc starts in radians, measured from the positive x-axis.
endAngle: number
The angle at which the arc ends in radians, measured from the positive x-axis.
Optional anticlockwise: boolean
An optional Boolean. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).
Returns void
begin
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
Returns void
clear
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
Parameters
x: number
The x-axis coordinate of the rectangle's starting point.
y: number
The y-axis coordinate of the rectangle's starting point.
width: number
The rectangle's width. Positive values are to the right, and negative to the left.
height: number
The rectangle's height. Positive values are down, and negative are up.
Returns void
clipSearch playground for clip
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.
Returns void
close
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
Returns void
create
Creates a linear gradient along the line given by the coordinates represented by the parameters.
Parameters
x0: number
The x-axis coordinate of the start point.
y0: number
The y-axis coordinate of the start point.
x1: number
The x-axis coordinate of the end point.
y1: number
The y-axis coordinate of the end point.
Returns ICanvasGradient
ICanvasGradient A linear ICanvasGradient initialized with the specified line.
create
Creates a linear gradient along the line given by the coordinates represented by the parameters.
Parameters
x0: number
The x-axis coordinate of the start circle.
y0: number
The y-axis coordinate of the start circle.
r0: number
The radius of the start circle. Must be non-negative and finite.
x1: number
The x-axis coordinate of the end point.
y1: number
The y-axis coordinate of the end point.
r1: number
The radius of the end circle. Must be non-negative and finite.
Returns ICanvasGradient
ICanvasGradient A linear ICanvasGradient initialized with the two specified circles.
draw
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
Parameters
image: any
An element to draw into the context.
sx: number
The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy: number
The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sWidth: number
The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
sHeight: number
The height of the sub-rectangle of the source image to draw into the destination context.
dx: number
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dy: number
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dWidth: number
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dHeight: number
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
Returns void
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
Parameters
image: any
An element to draw into the context.
dx: number
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dy: number
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dWidth: number
The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
dHeight: number
The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
Returns void
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
Parameters
image: any
An element to draw into the context.
dx: number
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
dy: number
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
Returns void
fillSearch playground for fill
Fills the current sub-paths with the current fill style.
Returns void
fill
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
Parameters
x: number
The x-axis coordinate of the rectangle's starting point.
y: number
The y-axis coordinate of the rectangle's starting point.
width: number
The rectangle's width. Positive values are to the right, and negative to the left.
height: number
The rectangle's height. Positive values are down, and negative are up.
Returns void
fill
Draws (fills) a given text at the given (x, y) position.
Parameters
text: string
A String specifying the text string to render into the context. The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.
x: number
The x-axis coordinate of the point at which to begin drawing the text, in pixels.
y: number
The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
Optional maxWidth: number
The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.
Returns void
get
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.
Parameters
sx: number
The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
sy: number
The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
sw: number
The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
sh: number
The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.
Returns ImageData
ImageData An ImageData object containing the image data for the rectangle of the canvas specified.
get
Retrieves the current transformation matrix being applied to the context.
Returns DOMMatrix
line
Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.
Parameters
x: number
The x-axis coordinate of the line's end point.
y: number
The y-axis coordinate of the line's end point.
Returns void
measure
Returns a TextMetrics object.
Parameters
text: string
The text String to measure.
Returns ITextMetrics
ITextMetrics A ITextMetrics object.
move
Moves the starting point of a new sub-path to the (x, y) coordinates.
Parameters
x: number
The x-axis (horizontal) coordinate of the point.
y: number
The y-axis (vertical) coordinate of the point.
Returns void
put
Paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
Parameters
imageData: ImageData
An ImageData object containing the array of pixel values.
dx: number
Horizontal position (x coordinate) at which to place the image data in the destination canvas.
dy: number
Vertical position (y coordinate) at which to place the image data in the destination canvas.
Returns void
quadratic
Adds a quadratic Bézier curve to the current path.
Parameters
cpx: number
The x-axis coordinate of the control point.
cpy: number
The y-axis coordinate of the control point.
x: number
The x-axis coordinate of the end point.
y: number
The y-axis coordinate of the end point.
Returns void
rectSearch playground for rect
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
Parameters
x: number
The x-axis coordinate of the rectangle's starting point.
y: number
The y-axis coordinate of the rectangle's starting point.
width: number
The rectangle's width. Positive values are to the right, and negative to the left.
height: number
The rectangle's height. Positive values are down, and negative are up.
Returns void
restoreSearch playground for restore
Restores the drawing style state to the last element on the 'state stack' saved by save().
Returns void
rotateSearch playground for rotate
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
Parameters
angle: number
The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree.
Returns void
saveSearch playground for save
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
Returns void
scaleSearch playground for scale
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
Parameters
x: number
Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
y: number
Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.
Returns void
set
Sets the current line dash pattern.
Parameters
segments: number[]
An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).
Returns void
set
Resets the current transform to matrix composed with a, b, c, d, e, f.
Parameters
a: number
Horizontal scaling. A value of 1 results in no scaling.
b: number
Vertical skewing.
c: number
Horizontal skewing.
d: number
Vertical scaling. A value of 1 results in no scaling.
e: number
Horizontal translation (moving).
f: number
Vertical translation (moving).
Returns void
strokeSearch playground for stroke
Strokes the current sub-paths with the current stroke style.
Returns void
stroke
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.
Parameters
x: number
The x-axis coordinate of the rectangle's starting point.
y: number
The y-axis coordinate of the rectangle's starting point.
width: number
The rectangle's width. Positive values are to the right, and negative to the left.
height: number
The rectangle's height. Positive values are down, and negative are up.
Returns void
stroke
Draws (strokes) a given text at the given (x, y) position.
Parameters
text: string
A String specifying the text string to render into the context. The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.
x: number
The x-axis coordinate of the point at which to begin drawing the text, in pixels.
y: number
The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
Optional maxWidth: number
The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.
Returns void
translateSearch playground for translate
Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.
Parameters
x: number
Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
y: number
Distance to move in the vertical direction. Positive values are down, and negative are up.
Returns void
Class used to abstract canvas rendering