Struct CanvasRenderingContext2d

pub struct CanvasRenderingContext2d(/* private fields */);

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

(JavaScript docs)

Implementations

impl CanvasRenderingContext2d

pub fn get_canvas(&self) -> CanvasElement

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)

pub fn get_fill_style(&self) -> CanvasStyle

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)

pub fn set_fill_style_color(&self, color: &str)

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)

pub fn set_fill_style_gradient(&self, gradient: &CanvasGradient)

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)

pub fn set_fill_style_pattern(&self, pattern: &CanvasPattern)

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)

pub fn get_font(&self) -> String

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)

pub fn set_font(&self, font: &str)

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)

pub fn get_global_alpha(&self) -> f64

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)

pub fn set_global_alpha(&self, global_alpha: f64)

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)

pub fn get_global_composite_operation(&self) -> CompositeOperation

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)

pub fn set_global_composite_operation( &self, composite_operation: CompositeOperation, )

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)

pub fn get_line_cap(&self) -> LineCap

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)

pub fn set_line_cap(&self, line_cap: LineCap)

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)

pub fn get_line_dash_offset(&self) -> f64

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

(JavaScript docs)

pub fn set_line_dash_offset(&self, line_dash_offset: f64)

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

(JavaScript docs)

pub fn get_line_join(&self) -> LineJoin

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)

pub fn set_line_join(&self, line_join: LineJoin)

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)

pub fn get_line_width(&self) -> f64

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)

pub fn set_line_width(&self, line_width: f64)

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)

pub fn get_miter_limit(&self) -> f64

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)

pub fn set_miter_limit(&self, miter_limit: f64)

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)

pub fn get_shadow_blur(&self) -> f64

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)

pub fn set_shadow_blur(&self, shadow_blur: f64)

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)

pub fn get_shadow_color(&self) -> String

Specifies the color of the shadow.

(JavaScript docs)

pub fn set_shadow_color(&self, shadow_color: &str)

Specifies the color of the shadow.

(JavaScript docs)

pub fn get_shadow_offset_x(&self) -> f64

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

(JavaScript docs)

pub fn set_shadow_offset_x(&self, shadow_offset_x: f64)

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

(JavaScript docs)

pub fn get_shadow_offset_y(&self) -> f64

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

(JavaScript docs)

pub fn set_shadow_offset_y(&self, shadow_offset_y: f64)

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

(JavaScript docs)

pub fn get_stroke_style(&self) -> CanvasStyle

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

(JavaScript docs)

pub fn set_stroke_style_color(&self, color: &str)

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

(JavaScript docs)

pub fn set_stroke_style_gradient(&self, gradient: &CanvasGradient)

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

(JavaScript docs)

pub fn set_stroke_style_pattern(&self, pattern: &CanvasPattern)

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

(JavaScript docs)

pub fn get_text_align(&self) -> TextAlign

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)

pub fn set_text_align(&self, text_align: TextAlign)

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)

pub fn get_text_baseline(&self) -> TextBaseline

Specifies the current text baseline being used when drawing text.

(JavaScript docs)

pub fn set_text_baseline(&self, text_baseline: TextBaseline)

Specifies the current text baseline being used when drawing text.

(JavaScript docs)

pub fn arc( &self, x: f64, y: f64, radius: f64, start_angle: f64, end_angle: f64, anticlockwise: bool, )

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)

pub fn arc_to( &self, x1: f64, y1: f64, x2: f64, y2: f64, radius: f64, ) -> Result<(), IndexSizeError>

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)

pub fn begin_path(&self)

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

(JavaScript docs)

pub fn bezier_curve_to( &self, cp1x: f64, cp1y: f64, cp2x: f64, cp2y: f64, x: f64, y: f64, )

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)

pub fn clear_rect(&self, x: f64, y: f64, width: f64, height: f64)

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)

pub fn clip(&self, fill_rule: FillRule)

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)

pub fn close_path(&self)

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)

pub fn create_linear_gradient( &self, x0: f64, y0: f64, x1: f64, y1: f64, ) -> CanvasGradient

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

(JavaScript docs)

pub fn create_image_data( &self, width: f64, height: f64, ) -> Result<ImageData, IndexSizeError>

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

(JavaScript docs)

pub fn create_image_data_size_of(&self, image_data: ImageData) -> ImageData

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

(JavaScript docs)

pub fn create_pattern_image( &self, image: ImageElement, repetition: Repetition, ) -> CanvasPattern

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)

pub fn create_radial_gradient( &self, x0: f64, y0: f64, r0: f64, x1: f64, y1: f64, r1: f64, ) -> Result<CanvasGradient, IndexSizeError>

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

(JavaScript docs)

pub fn draw_focus_if_needed<T: IHtmlElement>(&self, element: &T)

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

(JavaScript docs)

pub fn draw_image( &self, image: ImageElement, dx: f64, dy: f64, ) -> Result<(), DrawImageError>

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

pub fn draw_image_d( &self, image: ImageElement, dx: f64, dy: f64, d_width: f64, d_height: f64, ) -> Result<(), DrawImageError>

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

pub fn draw_image_s( &self, image: ImageElement, sx: f64, sy: f64, s_width: f64, s_height: f64, dx: f64, dy: f64, d_width: f64, d_height: f64, ) -> Result<(), DrawImageError>

Provides different ways to draw an image onto the canvas.

(JavaScript docs)

pub fn fill(&self, fill_rule: FillRule)

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)

pub fn fill_rect(&self, x: f64, y: f64, width: f64, height: f64)

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)

pub fn fill_text(&self, text: &str, x: f64, y: f64, max_width: Option<f64>)

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)

pub fn get_image_data( &self, sx: f64, sy: f64, sw: f64, sh: f64, ) -> Result<ImageData, GetImageDataError>

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)

pub fn get_line_dash(&self) -> Vec<f64>

Gets the current line dash pattern.

(JavaScript docs)

pub fn is_point_in_path(&self, x: f64, y: f64, fill_rule: FillRule) -> bool

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)

pub fn is_point_in_stroke(&self, x: f64, y: f64) -> bool

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)

pub fn line_to(&self, x: f64, y: f64)

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)

pub fn measure_text(&self, text: &str) -> Result<TextMetrics, SecurityError>

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

(JavaScript docs)

pub fn move_to(&self, x: f64, y: f64)

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

(JavaScript docs)

pub fn put_image_data( &self, image_data: ImageData, dx: f32, dy: f32, ) -> Result<(), InvalidStateError>

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)

pub fn put_image_data_dirty( &self, image_data: ImageData, dx: f32, dy: f32, dirty_x: f32, dirty_y: f32, dirty_width: f32, dirty_height: f32, ) -> Result<(), InvalidStateError>

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)

pub fn quadratic_curve_to(&self, cpx: f64, cpy: f64, x: f64, y: f64)

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)

pub fn rect(&self, x: f64, y: f64, width: f64, height: f64)

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)

pub fn restore(&self)

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)

pub fn rotate(&self, angle: f64)

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

(JavaScript docs)

pub fn save(&self)

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

(JavaScript docs)

pub fn scale(&self, x: f64, y: f64)

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)

pub fn set_line_dash(&self, segments: Vec<f64>)

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)

pub fn set_transform(&self, a: f64, b: f64, c: f64, d: f64, e: f64, f: f64)

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)

pub fn stroke(&self)

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)

pub fn stroke_rect(&self, x: f64, y: f64, width: f64, height: f64)

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)

pub fn stroke_text(&self, text: &str, x: f64, y: f64, max_width: Option<f64>)

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)

pub fn transform(&self, a: f64, b: f64, c: f64, d: f64, e: f64, f: f64)

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)

pub fn translate(&self, x: f64, y: f64)

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

(JavaScript docs)

Trait Implementations

impl AsRef<Reference> for CanvasRenderingContext2d

fn as_ref(&self) -> &Reference

Converts this type into a shared reference of the (usually inferred) input type.

impl Clone for CanvasRenderingContext2d

fn clone(&self) -> CanvasRenderingContext2d

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for CanvasRenderingContext2d

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl From<CanvasRenderingContext2d> for Reference

fn from(value: CanvasRenderingContext2d) -> Self

Converts to this type from the input type.

impl InstanceOf for CanvasRenderingContext2d

fn instance_of(reference: &Reference) -> bool

Checks whenever a given Reference if of type Self.

impl PartialEq for CanvasRenderingContext2d

fn eq(&self, other: &CanvasRenderingContext2d) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl ReferenceType for CanvasRenderingContext2d

unsafe fn from_reference_unchecked(reference: Reference) -> Self

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

impl RenderingContext for CanvasRenderingContext2d

type Error = ConversionError

Type of error which can occur whilst creating this context

fn from_canvas(canvas: &CanvasElement) -> Result<Self, ConversionError>

Name which identifies this kind of rendering context.

impl<'_r> TryFrom<&'_r Reference> for CanvasRenderingContext2d

type Error = ConversionError

The type returned in the event of a conversion error.

fn try_from(reference: &Reference) -> Result<Self, Self::Error>

Performs the conversion.

impl<'_r> TryFrom<&'_r Value> for CanvasRenderingContext2d

type Error = ConversionError

The type returned in the event of a conversion error.

fn try_from(value: &Value) -> Result<Self, Self::Error>

Performs the conversion.

impl TryFrom<CanvasRenderingContext2d> for Reference

type Error = Void

The type returned in the event of a conversion error.

fn try_from(value: CanvasRenderingContext2d) -> Result<Self, Self::Error>

Performs the conversion.

impl TryFrom<Reference> for CanvasRenderingContext2d

type Error = ConversionError

The type returned in the event of a conversion error.

fn try_from(reference: Reference) -> Result<Self, Self::Error>

Performs the conversion.

impl TryFrom<Value> for CanvasRenderingContext2d

type Error = ConversionError

The type returned in the event of a conversion error.

fn try_from(value: Value) -> Result<Self, Self::Error>

Performs the conversion.

impl Eq for CanvasRenderingContext2d

impl JsSerialize for CanvasRenderingContext2d

impl StructuralPartialEq for CanvasRenderingContext2d