Struct stdweb::web::CanvasRenderingContext2d [] [src]

pub struct CanvasRenderingContext2d(_);

Used for drawing rectangles, text, images and other objects onto the canvas element.

(JavaScript docs)

Methods

impl CanvasRenderingContext2d
[src]

[src]

The CanvasRenderingContext2D.canvas property is a read-only reference to the HTMLCanvasElement object that is associated with the context. It might be null if there is no association with an element.

(JavaScript docs)

[src]

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes. The default is #000 (black).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes. The default is #000 (black).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes. The default is #000 (black).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or style to use inside shapes. The default is #000 (black).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style being used when drawing text. This string uses the same syntax as the CSS font specifier. The default font is 10px sans-serif.

(JavaScript docs)

[src]

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style being used when drawing text. This string uses the same syntax as the CSS font specifier. The default font is 10px sans-serif.

(JavaScript docs)

[src]

The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha value that is applied to shapes and images before they are drawn onto the canvas. The value is in the range from 0.0 (fully transparent) to 1.0 (fully opaque).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha value that is applied to shapes and images before they are drawn onto the canvas. The value is in the range from 0.0 (fully transparent) to 1.0 (fully opaque).

(JavaScript docs)

[src]

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the compositing or blending mode operations to use.

(JavaScript docs)

[src]

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the compositing or blending mode operations to use.

(JavaScript docs)

[src]

Determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

(JavaScript docs)

[src]

Determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

(JavaScript docs)

[src]

Sets the line dash pattern offset or "phase" to achieve a "marching ants" effect, for example.

(JavaScript docs)

[src]

Sets the line dash pattern offset or "phase" to achieve a "marching ants" effect, for example.

(JavaScript docs)

[src]

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).

(JavaScript docs)

[src]

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).

(JavaScript docs)

[src]

Sets the thickness of lines in space units. When getting, it returns the current value (1.0 by default). When setting, zero, negative, Infinity and NaN values are ignored; otherwise the current value is set to the new value.

(JavaScript docs)

[src]

Sets the thickness of lines in space units. When getting, it returns the current value (1.0 by default). When setting, zero, negative, Infinity and NaN values are ignored; otherwise the current value is set to the new value.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

Specifies the level of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

(JavaScript docs)

[src]

Specifies the level of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

(JavaScript docs)

[src]

Specifies the color of the shadow.

(JavaScript docs)

[src]

Specifies the color of the shadow.

(JavaScript docs)

[src]

Specifies the distance that the shadow will be offset in horizontal distance.

(JavaScript docs)

[src]

Specifies the distance that the shadow will be offset in horizontal distance.

(JavaScript docs)

[src]

Specifies the distance that the shadow will be offset in vertical distance.

(JavaScript docs)

[src]

Specifies the distance that the shadow will be offset in vertical distance.

(JavaScript docs)

[src]

Specifies the color or style to use for the lines around shapes. The default is #000 (black).

(JavaScript docs)

[src]

Specifies the color or style to use for the lines around shapes. The default is #000 (black).

(JavaScript docs)

[src]

Specifies the color or style to use for the lines around shapes. The default is #000 (black).

(JavaScript docs)

[src]

Specifies the color or style to use for the lines around shapes. The default is #000 (black).

(JavaScript docs)

[src]

specifies the current text alignment being used when drawing text. Beware that the alignment is based on the x value of the fillText() method. So if textAlign is "center", then the text would be drawn at x - (width / 2).

(JavaScript docs)

[src]

specifies the current text alignment being used when drawing text. Beware that the alignment is based on the x value of the fillText() method. So if textAlign is "center", then the text would be drawn at x - (width / 2).

(JavaScript docs)

[src]

Specifies the current text baseline being used when drawing text.

(JavaScript docs)

[src]

Specifies the current text baseline being used when drawing text.

(JavaScript docs)

[src]

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).

(JavaScript docs)

[src]

Adds an arc to the path with the given control points and radius. The arc drawn will be a part of a circle, never elliptical. Typical use could be making a rounded corner. One way to think about the arc drawn is to imagine two straight segments, from the starting point (latest point in current path) to the first control point, and then from the first control point to the second control point. These two segments form a sharp corner with the first control point being in the corner. Using arcTo, the corner will instead be an arc with the given radius. The arc is tangential to both segments, which can sometimes produce surprising results, e.g. if the radius given is larger than the distance between the starting point and the first control point. If the radius specified doesn't make the arc meet the starting point (latest point in the current path), the starting point is connected to the arc with a straight line segment.

(JavaScript docs)

[src]

Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.

(JavaScript docs)

[src]

Turns the path currently being built into the current clipping path. ctx.clip(path, fillRule) is not supported because (Path2D) is still experimental

(JavaScript docs)

[src]

Causes the point of the pen to move back to the start of the current sub-path. It tries to add a straight line (but does not actually draw it) from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

(JavaScript docs)

[src]

Creates a gradient along the line given by the coordinates represented by the parameters.

(JavaScript docs)

[src]

Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

(JavaScript docs)

[src]

Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.

(JavaScript docs)

[src]

Creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the directions specified by the repetition argument. This method returns a CanvasPattern.

(JavaScript docs)

[src]

Creates a radial gradient given by the coordinates of the two circles represented by the parameters. This method returns a CanvasGradient.

(JavaScript docs)

[src]

Draws a focus ring around the current path or given path, If a given element is focused.

(JavaScript docs)

[src]

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

[src]

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

[src]

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

[src]

Fills the current or given path with the current fill style using the non-zero or even-odd winding rule.

ctx.fill(path, fillRule) is not supported because (Path2D) is still experimental

(JavaScript docs)

[src]

Draws a filled rectangle whose starting point is at the coordinates (x, y) with the specified width and height and whose style is determined by the fillStyle attribute.

(JavaScript docs)

[src]

Draws a text string at the specified coordinates, filling the string's characters with the current foreground color. 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.

(JavaScript docs)

[src]

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. Pixels outside of the canvas area are present as transparent black values in the returned ImageData.

(JavaScript docs)

[src]

Gets the current line dash pattern.

(JavaScript docs)

[src]

Reports whether or not the specified point is contained in the current path.

ctx.isPointInPath(path, x, y) and ctx.isPointInPath(path, x, y, fillRule) are not supported because (Path2D) is still experimental

(JavaScript docs)

[src]

Reports whether or not the specified point is inside the area contained by the stroking of a path.

ctx.isPointInStroke(path, x, y) is not supported because (Path2D) is still experimental

(JavaScript docs)

[src]

Connects the last point in the sub-path to the x, y coordinates with a straight line (but does not actually draw it).

(JavaScript docs)

[src]

Returns a TextMetrics object that contains information about the measured text (such as its width for example).

(JavaScript docs)

[src]

Moves the starting point of a new sub-path to the (x, y) coordinates.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

Creates a path for a rectangle at position (x, y) with a size that is determined by width and height. Those four points are connected by straight lines and the sub-path is marked as closed, so that you can fill or stroke this rectangle.

(JavaScript docs)

[src]

Restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.

(JavaScript docs)

[src]

Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.

(JavaScript docs)

[src]

Saves the entire state of the canvas by pushing the current state onto a stack.

(JavaScript docs)

[src]

adds a scaling transformation to the canvas units by x horizontally and by y vertically. By default, one unit on the canvas is exactly one pixel. If we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so shapes would be drawn at half size. In a similar way setting the scaling factor to 2.0 would increase the unit size and one unit now becomes two pixels. This results in shapes being drawn twice as large.

(JavaScript docs)

[src]

Sets 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.

(JavaScript docs)

[src]

Resets (overrides) the current transformation to the identity matrix and then invokes a transformation described by the arguments of this method. See also the transform() method, which does not override the current transform matrix and multiplies it with a given one.

(JavaScript docs)

[src]

Strokes the current or given path with the current stroke style using the non-zero winding rule.

ctx.stroke(path) is not supported because (Path2D) is still experimental

(JavaScript docs)

[src]

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.

(JavaScript docs)

[src]

Strokes — that is, draws the outlines of — the characters of a specified text string at the given (x, y) position. If the optional fourth parameter for a maximum width is provided, the text is scaled to fit that width. See the CanvasRenderingContext2D.fillText() method to draw the text with the characters filled with color rather than having just their outlines drawn.

(JavaScript docs)

[src]

Multiplies the current transformation with the matrix described by the arguments of this method. You are able to scale, rotate, move and skew the context. See also the setTransform() method which resets the current transform to the identity matrix and then invokes transform().

(JavaScript docs)

[src]

Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.

(JavaScript docs)

Trait Implementations

impl Clone for CanvasRenderingContext2d
[src]

[src]

Returns a copy of the value. Read more

1.0.0
[src]

Performs copy-assignment from source. Read more

impl Debug for CanvasRenderingContext2d
[src]

[src]

Formats the value using the given formatter. Read more

impl PartialEq for CanvasRenderingContext2d
[src]

[src]

This method tests for self and other values to be equal, and is used by ==. Read more

[src]

This method tests for !=.

impl Eq for CanvasRenderingContext2d
[src]

impl InstanceOf for CanvasRenderingContext2d
[src]

[src]

Checks whenever a given Reference if of type Self.

impl AsRef<Reference> for CanvasRenderingContext2d
[src]

[src]

Performs the conversion.

impl ReferenceType for CanvasRenderingContext2d
[src]

[src]

Converts a given reference into a concrete reference-like wrapper. Doesn't do any type checking; highly unsafe to use! Read more

impl From<CanvasRenderingContext2d> for Reference
[src]

[src]

Performs the conversion.

impl TryFrom<CanvasRenderingContext2d> for Reference
[src]

The type returned in the event of a conversion error.

[src]

Performs the conversion.

impl TryFrom<Reference> for CanvasRenderingContext2d
[src]

The type returned in the event of a conversion error.

[src]

Performs the conversion.

impl<'_r> TryFrom<&'_r Reference> for CanvasRenderingContext2d
[src]

The type returned in the event of a conversion error.

[src]

Performs the conversion.

impl TryFrom<Value> for CanvasRenderingContext2d
[src]

The type returned in the event of a conversion error.

[src]

Performs the conversion.

impl<'_r> TryFrom<&'_r Value> for CanvasRenderingContext2d
[src]

The type returned in the event of a conversion error.

[src]

Performs the conversion.

impl JsSerialize for CanvasRenderingContext2d
[src]

impl RenderingContext for CanvasRenderingContext2d
[src]

Type of error which can occur whilst creating this context

[src]

Name which identifies this kind of rendering context.

Auto Trait Implementations