Interface ICanvasRenderingContext2D
Namespace: Aspose.Html.Dom.Canvas
Assembly: Aspose.HTML.dll (25.2.0)
The ICanvasRenderingContext2D interface is used for drawing rectangles, text, images and other objects onto the canvas element. It provides the 2D rendering context for the drawing surface of a canvas element.
[ComVisible(true)]
[DOMNoInterfaceObject]
[DOMObject]
public interface ICanvasRenderingContext2D : ICanvasDrawingStyles, ICanvasPathMethodsImplements
ICanvasDrawingStyles, ICanvasPathMethods
Properties
Canvas
A read-only back-reference to the HTMLCanvasElement. Might be null if it is not associated with a canvas element.
[DOMName("canvas")]
HTMLCanvasElement Canvas { get; }Property Value
FillStyle
Color or style to use inside shapes. Default: (black).
[DOMName("fillStyle")]
object FillStyle { get; set; }Property Value
GlobalAlpha
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
[DOMName("globalAlpha")]
double GlobalAlpha { get; set; }Property Value
GlobalCompositeOperation
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Default: (source-over)
[DOMName("globalCompositeOperation")]
string GlobalCompositeOperation { get; set; }Property Value
ImageSmoothingEnabled
Image smoothing mode; if disabled, images will not be smoothed if scaled.
[DOMName("imageSmoothingEnabled")]
bool ImageSmoothingEnabled { get; set; }Property Value
ShadowBlur
Specifies the blurring effect. Default 0
[DOMName("shadowBlur")]
double ShadowBlur { get; set; }Property Value
ShadowColor
Color of the shadow. Default fully-transparent black.
[DOMName("shadowColor")]
string ShadowColor { get; set; }Property Value
ShadowOffsetX
Horizontal distance the shadow will be offset. Default 0.
[DOMName("shadowOffsetX")]
double ShadowOffsetX { get; set; }Property Value
ShadowOffsetY
Vertical distance the shadow will be offset. Default 0.
[DOMName("shadowOffsetY")]
double ShadowOffsetY { get; set; }Property Value
StrokeStyle
Color or style to use for the lines around shapes. Default: (black).
[DOMName("strokeStyle")]
object StrokeStyle { get; set; }Property Value
Methods
AddHitRegion(Dictionary<string, string="">)
Adds a hit region to the canvas. This allows you to make hit detection easier, lets you route events to DOM elements, and makes it possible for users to explore the canvas without seeing it.
void AddHitRegion(Dictionary<string, string=""> options)Parameters
options Dictionary<string, string>
The options argument is optional. When provided, it is an Object which can contain properties.
BeginPath()
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
[DOMName("beginPath")]
void BeginPath()ClearHitRegions()
Removes all hit regions from the canvas.
[DOMName("clearHitRegions")]
void ClearHitRegions()ClearRect(double, double, double, double)
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
[DOMName("clearRect")]
void ClearRect(double x, double y, double w, double h)Parameters
x double
The x axis of the coordinate for the rectangle starting point.
y double
The y axis of the coordinate for the rectangle starting point.
w double
The rectangle’s width.
h double
The rectangle’s height.
Clip()
Creates a new clipping region by calculating the intersection of the current clipping region and the area described by the path, using the non-zero winding number rule. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths. The new clipping region replaces the current clipping region.
[DOMName("clip")]
void Clip()Clip(CanvasFillRule)
Creates a new clipping region by calculating the intersection of the current clipping region and the area described by the path, using the non-zero winding number rule. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths. The new clipping region replaces the current clipping region.
[DOMName("clip")]
void Clip(CanvasFillRule fillRule)Parameters
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path
Clip(Path2D, CanvasFillRule)
Creates a new clipping region by calculating the intersection of the current clipping region and the area described by the path, using the non-zero winding number rule. Open subpaths must be implicitly closed when computing the clipping region, without affecting the actual subpaths. The new clipping region replaces the current clipping region.
[DOMName("clip")]
void Clip(Path2D path, CanvasFillRule fillRule)Parameters
path Path2D
A Path2D path to clip.
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path.
CreateImageData(double, double)
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
[DOMName("createImageData")]
IImageData CreateImageData(double sw, double sh)Parameters
sw double
The width to give the new ImageData object.
sh double
The height to give the new ImageData object.
Returns
A new ImageData object with the specified width and height. The new object is filled with transparent black pixels.
CreateImageData(IImageData)
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
[DOMName("createImageData")]
IImageData CreateImageData(IImageData imagedata)Parameters
imagedata IImageData
An existing ImageData object from which to copy the width and height. The image itself is not copied.
Returns
A new ImageData object with the specified width and height. The new object is filled with transparent black pixels.
CreateLinearGradient(double, double, double, double)
Creates a linear gradient along the line given by the coordinates represented by the parameters.
[DOMName("createLinearGradient")]
ICanvasGradient CreateLinearGradient(double x0, double y0, double x1, double y1)Parameters
x0 double
The x axis of the coordinate of the start point.
y0 double
The y axis of the coordinate of the start point.
x1 double
The x axis of the coordinate of the end point.
y1 double
The y axis of the coordinate of the end point.
Returns
The linear CanvasGradient.
CreatePattern(HTMLImageElement, string)
Creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the directions specified by the repetition argument.
[DOMName("createPattern")]
ICanvasPattern CreatePattern(HTMLImageElement image, string repetition)Parameters
image HTMLImageElement
A HTMLImageElement to be used as the image to repeat
repetition string
A string indicating how to repeat the image.
Returns
An opaque object describing a pattern.
CreatePattern(HTMLCanvasElement, string)
Creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the directions specified by the repetition argument.
[DOMName("createPattern")]
ICanvasPattern CreatePattern(HTMLCanvasElement image, string repetition)Parameters
image HTMLCanvasElement
A HTMLCanvasElement to be used as the image to repeat
repetition string
A string indicating how to repeat the image.
Returns
An opaque object describing a pattern.
CreateRadialGradient(double, double, double, double, double, double)
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
[DOMName("createRadialGradient")]
ICanvasGradient CreateRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)Parameters
x0 double
The x axis of the coordinate of the start circle.
y0 double
The y axis of the coordinate of the start circle
r0 double
The radius of the start circle.
x1 double
The x axis of the coordinate of the end circle.
y1 double
The y axis of the coordinate of the end circle.
r1 double
The radius of the end circle.
Returns
A radial CanvasGradient initialized with the two specified circles.
DrawFocusIfNeeded(Element)
If a given element is focused, this method draws a focus ring around the current path.
[DOMName("drawFocusIfNeeded")]
void DrawFocusIfNeeded(Element element)Parameters
element Element
The element to check whether it is focused or not.
DrawImage(HTMLImageElement, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLImageElement image, double dx, double dy)Parameters
image HTMLImageElement
The HTMLImageElement to draw into the context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
DrawImage(HTMLCanvasElement, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLCanvasElement image, double dx, double dy)Parameters
image HTMLCanvasElement
The HTMLCanvasElement to draw into the context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
DrawImage(HTMLImageElement, double, double, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLImageElement image, double dx, double dy, double dw, double dh)Parameters
image HTMLImageElement
The HTMLImageElement to draw into the context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw double
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.
dh double
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.
DrawImage(HTMLCanvasElement, double, double, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLCanvasElement image, double dx, double dy, double dw, double dh)Parameters
image HTMLCanvasElement
The HTMLCanvasElement to draw into the context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw double
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.
dh double
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.
DrawImage(HTMLImageElement, double, double, double, double, double, double, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLImageElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh)Parameters
image HTMLImageElement
The HTMLImageElement to draw into the context.
sx double
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy double
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw double
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.
sh double
The height of the sub-rectangle of the source image to draw into the destination context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw double
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.
dh double
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.
DrawImage(HTMLCanvasElement, double, double, double, double, double, double, double, double)
Draws the specified image.
[DOMName("drawImage")]
void DrawImage(HTMLCanvasElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh)Parameters
image HTMLCanvasElement
The HTMLCanvasElement to draw into the context.
sx double
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sy double
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
sw double
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.
sh double
The height of the sub-rectangle of the source image to draw into the destination context.
dx double
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
dy double
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
dw double
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.
dh double
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.
Fill()
Fills the subpaths with the current fill style and default algorithm CanvasFillRule.Nonzero.
[DOMName("fill")]
void Fill()Fill(CanvasFillRule)
Fills the subpaths with the current fill style.
[DOMName("fill")]
void Fill(CanvasFillRule fillRule)Parameters
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path.
Fill(Path2D)
Fills the subpaths with the current fill style and default algorithm CanvasFillRule.Nonzero.
[DOMName("fill")]
void Fill(Path2D path)Parameters
path Path2D
A Path2D path to fill.
Fill(Path2D, CanvasFillRule)
Fills the subpaths with the current fill style.
[DOMName("fill")]
void Fill(Path2D path, CanvasFillRule fillRule)Parameters
path Path2D
A Path2D path to fill.
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path.
FillRect(double, double, double, double)
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
[DOMName("fillRect")]
void FillRect(double x, double y, double w, double h)Parameters
x double
The x axis of the coordinate for the rectangle starting point.
y double
The y axis of the coordinate for the rectangle starting point.
w double
The rectangle’s width.
h double
The rectangle’s height.
FillText(string, double, double)
Draws (fills) a given text at the given (x,y) position.
[DOMName("fillText")]
void FillText(string text, double x, double y)Parameters
text string
The text to draw using the current font, textAlign, textBaseline, and direction values.
x double
The x axis of the coordinate for the text starting point.
y double
The y axis of the coordinate for the text starting point.
FillText(string, double, double, double)
Draws (fills) a given text at the given (x,y) position.
[DOMName("fillText")]
void FillText(string text, double x, double y, double maxWidth)Parameters
text string
The text to draw using the current font, textAlign, textBaseline, and direction values.
x double
The x axis of the coordinate for the text starting point.
y double
The y axis of the coordinate for the text starting point.
maxWidth double
The 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 (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
GetImageData(double, double, double, double)
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.
[DOMName("getImageData")]
IImageData GetImageData(double sx, double sy, double sw, double sh)Parameters
sx double
The x coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
sy double
The y coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
sw double
The width of the rectangle from which the ImageData will be extracted.
sh double
The height of the rectangle from which the ImageData will be extracted.
Returns
An ImageData object containing the image data for the given rectangle of the canvas.
IsPointInPath(double, double)
Reports whether or not the specified point is contained in the current path.
[DOMName("isPointInPath")]
bool IsPointInPath(double x, double y)Parameters
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
Returns
Returns true if the point is inside the area contained by the filling of a path, otherwise false.
IsPointInPath(double, double, CanvasFillRule)
Reports whether or not the specified point is contained in the current path.
[DOMName("isPointInPath")]
bool IsPointInPath(double x, double y, CanvasFillRule fillRule)Parameters
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path.
Returns
Returns true if the point is inside the area contained by the filling of a path, otherwise false.
IsPointInPath(Path2D, double, double)
Reports whether or not the specified point is contained in the current path.
[DOMName("isPointInPath")]
bool IsPointInPath(Path2D path, double x, double y)Parameters
path Path2D
A Path2D path to check.
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
Returns
Returns true if the point is inside the area contained by the filling of a path, otherwise false.
IsPointInPath(Path2D, double, double, CanvasFillRule)
Reports whether or not the specified point is contained in the current path.
[DOMName("isPointInPath")]
bool IsPointInPath(Path2D path, double x, double y, CanvasFillRule fillRule)Parameters
path Path2D
A Path2D path to check.
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
fillRule CanvasFillRule
The algorithm by which to determine if a point is inside a path or outside a path.
Returns
Returns true if the point is inside the area contained by the filling of a path, otherwise false.
IsPointInStroke(double, double)
Reports whether or not the specified point is inside the area contained by the stroking of a path.
[DOMName("isPointInStroke")]
bool IsPointInStroke(double x, double y)Parameters
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
Returns
Returns true if the point is inside the area contained by the stroking of a path, otherwise false.
IsPointInStroke(Path2D, double, double)
Reports whether or not the specified point is inside the area contained by the stroking of a path.
bool IsPointInStroke(Path2D path, double x, double y)Parameters
path Path2D
A Path2D path to check.
x double
The X coordinate of the point to check.
y double
The Y coordinate of the point to check.
Returns
Returns true if the point is inside the area contained by the stroking of a path, otherwise false.
MeasureText(string)
Returns a TextMetrics object.
[DOMName("measureText")]
ITextMetrics MeasureText(string text)Parameters
text string
The text to measure.
Returns
A TextMetrics object.
PutImageData(IImageData, double, double)
Paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.
[DOMName("putImageData")]
void PutImageData(IImageData imagedata, double dx, double dy)Parameters
imagedata IImageData
An ImageData object containing the array of pixel values.
dx double
Horizontal position (x-coordinate) at which to place the image data in the destination canvas.
dy double
Vertical position (y-coordinate) at which to place the image data in the destination canvas.
PutImageData(IImageData, double, double, double, double, double, double)
Paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.
[DOMName("putImageData")]
void PutImageData(IImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight)Parameters
imagedata IImageData
An ImageData object containing the array of pixel values.
dx double
Horizontal position (x-coordinate) at which to place the image data in the destination canvas.
dy double
Vertical position (y-coordinate) at which to place the image data in the destination canvas.
dirtyX double
Horizontal position (x-coordinate). The x coordinate of the top left hand corner of your Image data. Defaults to 0.
dirtyY double
Vertical position (y-coordinate). The y coordinate of the top left hand corner of your Image data. Defaults to 0.
dirtyWidth double
Width of the rectangle to be painted. Defaults to the width of the image data.
dirtyHeight double
Height of the rectangle to be painted. Defaults to the height of the image data.
RemoveHitRegion(string)
Removes the hit region with the specified id from the canvas.
[DOMName("removeHitRegion")]
void RemoveHitRegion(string id)Parameters
id string
A string representing the id of the region that is to be removed.
ResetTransform()
Resets the current transform by the identity matrix.
[DOMName("resetTransform")]
void ResetTransform()Restore()
Restores the drawing style state to the last element on the ‘state stack’ saved by save().
[DOMName("restore")]
void Restore()Rotate(double)
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
[DOMName("rotate")]
void Rotate(double angle)Parameters
angle double
Represents a clockwise rotation angle expressed in radians.
Save()
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
[DOMName("save")]
void Save()Scale(double, double)
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
[DOMName("scale")]
void Scale(double x, double y)Parameters
x double
Scaling factor in the horizontal direction.
y double
Scaling factor in the vertical direction.
SetTransform(double, double, double, double, double, double)
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
[DOMName("setTransform")]
void SetTransform(double a, double b, double c, double d, double e, double f)Parameters
a double
Horizontal scaling.
b double
Horizontal skewing.
c double
Vertical skewing.
d double
Vertical scaling.
e double
Horizontal moving.
f double
Vertical moving.
Stroke()
Strokes the subpaths with the current stroke style.
[DOMName("stroke")]
void Stroke()Stroke(Path2D)
Strokes the subpaths with the current stroke style.
[DOMName("stroke")]
void Stroke(Path2D path)Parameters
path Path2D
A Path2D path to stroke.
StrokeRect(double, double, double, double)
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.
[DOMName("strokeRect")]
void StrokeRect(double x, double y, double w, double h)Parameters
x double
The x axis of the coordinate for the rectangle starting point.
y double
The y axis of the coordinate for the rectangle starting point.
w double
The rectangle’s width.
h double
The rectangle’s height.
StrokeText(string, double, double)
Draws (strokes) a given text at the given (x, y) position.
[DOMName("strokeText")]
void StrokeText(string text, double x, double y)Parameters
text string
The text to draw using the current font, textAlign, textBaseline, and direction values.
x double
The x axis of the coordinate for the text starting point.
y double
The y axis of the coordinate for the text starting point.
StrokeText(string, double, double, double?)
Draws (strokes) a given text at the given (x, y) position.
[DOMName("strokeText")]
void StrokeText(string text, double x, double y, double? maxWidth)Parameters
text string
The text to draw using the current font, textAlign, textBaseline, and direction values.
x double
The x axis of the coordinate for the text starting point.
y double
The y axis of the coordinate for the text starting point.
maxWidth double?
The 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 (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
Transform(double, double, double, double, double, double)
Multiplies the current transformation matrix with the matrix described by its arguments.
[DOMName("transform")]
void Transform(double a, double b, double c, double d, double e, double f)Parameters
a double
Horizontal scaling.
b double
Horizontal skewing.
c double
Vertical skewing.
d double
Vertical scaling.
e double
Horizontal moving.
f double
Vertical moving.
Translate(double, double)
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
[DOMName("translate")]
void Translate(double x, double y)Parameters
x double
Distance to move in the horizontal direction.
y double
Distance to move in the vertical direction. </string,></string,>