Interface ICanvasRenderingContext
Hierarchy
- ICanvasRenderingContext
Index
Properties
Methods
Properties
Readonly canvasSearch playground for canvas
canvas is a read-only reference to ICanvas.
fill StyleSearch playground for fillStyle
Color or style to use inside shapes. Default #000 (black).
fontSearch playground for font
Font setting. Default value 10px sans-serif.
global AlphaSearch playground for globalAlpha
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
line JoinSearch playground for lineJoin
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
line WidthSearch playground for lineWidth
Width of lines. Default 1.0.
miter LimitSearch playground for miterLimit
Miter limit ratio. Default 10.
shadow BlurSearch playground for shadowBlur
Specifies the blurring effect. Default: 0.
shadow ColorSearch playground for shadowColor
Color of the shadow. Default: fully-transparent black.
shadow OffsetXSearch playground for shadowOffsetX
Horizontal distance the shadow will be offset. Default: 0.
shadow OffsetYSearch playground for shadowOffsetY
Vertical distance the shadow will be offset. Default: 0.
stroke StyleSearch playground for strokeStyle
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 PathSearch playground for beginPath
-
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 RectSearch playground for clearRect
-
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 PathSearch playground for closePath
-
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 Linear GradientSearch playground for createLinearGradient
-
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.
-
draw ImageSearch playground for drawImage
-
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 RectSearch playground for fillRect
-
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 TextSearch playground for fillText
-
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 Image DataSearch playground for getImageData
-
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.
-
line ToSearch playground for lineTo
-
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 TextSearch playground for measureText
-
Returns a TextMetrics object.
Parameters
-
text: string
The text String to measure.
Returns ITextMetrics
ITextMetrics A ITextMetrics object.
-
move ToSearch playground for moveTo
-
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 Image DataSearch playground for putImageData
-
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 Curve ToSearch playground for quadraticCurveTo
-
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 Line DashSearch playground for setLineDash
-
Sets the current line dash pattern.
Parameters
-
segments: Array<number>
An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).
Returns void
-
set TransformSearch playground for setTransform
-
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 RectSearch playground for strokeRect
-
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 TextSearch playground for strokeText
-
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 horzontally 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