web_sys::CanvasRenderingContext2d::rect function

Example

This example draws a rectangle using the rect function of CanvasRenderingContext2d on a HTML canvas. The parameters of the rect function are explained below:

  • x - 75 (x-coordinate of the center of the circle)
  • y - 75 (y-coordinate of the center of the circle)
  • width - the width of the rectangle in pixels
  • height - the height of the rectangle in pixels


pub fn canvasrenderingcontext2d_rect()
{
    let document = web_sys::window().unwrap().document().unwrap();
    let canvas = document.get_element_by_id("canvas").unwrap();
    let canvas: web_sys::HtmlCanvasElement = canvas
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .map_err(|_| ())
        .unwrap();

    let context = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .unwrap();

    context.begin_path();

    // x - 75 (x-coordinate of the center of the circle)
    // y - 75 (y-coordinate of the center of the circle)
    // width - the width of the rectangle in pixels
    // height - the height of the rectangle in pixels
    context
        .rect(75.0, 75.0, 50.0, 50.0);

    context.stroke();

}

Function


        pub fn rect(&self, x: f64, y: f64, w: f64, h: f64)      
    

features/dependencies

Source Code