Trait RenderContext 

pub trait RenderContext {
    // Required methods
    fn dpr(&self) -> f64;
    fn set_stroke_color(&mut self, color: &str);
    fn set_stroke_width(&mut self, width: f64);
    fn set_line_dash(&mut self, pattern: &[f64]);
    fn set_line_cap(&mut self, cap: &str);
    fn set_line_join(&mut self, join: &str);
    fn set_fill_color(&mut self, color: &str);
    fn set_global_alpha(&mut self, alpha: f64);
    fn begin_path(&mut self);
    fn move_to(&mut self, x: f64, y: f64);
    fn line_to(&mut self, x: f64, y: f64);
    fn close_path(&mut self);
    fn rect(&mut self, x: f64, y: f64, w: f64, h: f64);
    fn arc(
        &mut self,
        cx: f64,
        cy: f64,
        radius: f64,
        start_angle: f64,
        end_angle: f64,
    );
    fn ellipse(
        &mut self,
        cx: f64,
        cy: f64,
        rx: f64,
        ry: f64,
        rotation: f64,
        start: f64,
        end: f64,
    );
    fn quadratic_curve_to(&mut self, cpx: f64, cpy: f64, x: f64, y: f64);
    fn bezier_curve_to(
        &mut self,
        cp1x: f64,
        cp1y: f64,
        cp2x: f64,
        cp2y: f64,
        x: f64,
        y: f64,
    );
    fn stroke(&mut self);
    fn fill(&mut self);
    fn clip(&mut self);
    fn stroke_rect(&mut self, x: f64, y: f64, w: f64, h: f64);
    fn fill_rect(&mut self, x: f64, y: f64, w: f64, h: f64);
    fn set_font(&mut self, font: &str);
    fn set_text_align(&mut self, align: TextAlign);
    fn set_text_baseline(&mut self, baseline: TextBaseline);
    fn fill_text(&mut self, text: &str, x: f64, y: f64);
    fn stroke_text(&mut self, text: &str, x: f64, y: f64);
    fn measure_text(&self, text: &str) -> f64;
    fn save(&mut self);
    fn restore(&mut self);
    fn translate(&mut self, x: f64, y: f64);
    fn rotate(&mut self, angle: f64);
    fn scale(&mut self, x: f64, y: f64);

    // Provided methods
    fn set_fill_color_alpha(&mut self, color: &str, alpha: f64) { ... }
    fn reset_alpha(&mut self) { ... }
    fn clip_rect(&mut self, x: f64, y: f64, width: f64, height: f64) { ... }
    fn fill_rounded_rect(&mut self, x: f64, y: f64, w: f64, h: f64, radius: f64) { ... }
    fn stroke_rounded_rect(
        &mut self,
        x: f64,
        y: f64,
        w: f64,
        h: f64,
        radius: f64,
    ) { ... }
    fn rounded_rect(&mut self, x: f64, y: f64, w: f64, h: f64, r: f64) { ... }
    fn fill_text_rotated(&mut self, text: &str, x: f64, y: f64, angle: f64) { ... }
    fn fill_text_centered(&mut self, text: &str, x: f64, y: f64) { ... }
    fn draw_image(
        &mut self,
        image_id: &str,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
    ) -> bool { ... }
    fn draw_image_rgba(
        &mut self,
        data: &[u8],
        img_width: u32,
        img_height: u32,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
    ) { ... }
    fn draw_blur_background(&mut self, x: f64, y: f64, width: f64, height: f64) { ... }
    fn has_blur_background(&self) -> bool { ... }
    fn use_convex_glass_buttons(&self) -> bool { ... }
    fn draw_hover_rect(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        color: &str,
    ) { ... }
    fn draw_active_rect(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        color: &str,
    ) { ... }
    fn draw_hover_rounded_rect(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        radius: f64,
        color: &str,
    ) { ... }
    fn draw_active_rounded_rect(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        radius: f64,
        color: &str,
    ) { ... }
    fn draw_sidebar_hover_item(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        accent_color: &str,
        bg_color: &str,
        indicator_width: f64,
    ) { ... }
    fn draw_sidebar_active_item(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        accent_color: &str,
        bg_color: &str,
        indicator_width: f64,
    ) { ... }
    fn draw_glass_button_3d(
        &mut self,
        x: f64,
        y: f64,
        width: f64,
        height: f64,
        radius: f64,
        _is_active: bool,
        color: &str,
    ) { ... }
}

Platform-agnostic rendering context

Applications implement this trait to provide rendering capabilities to primitives, charts, and widgets.

Required Methods

fn dpr(&self) -> f64

Device pixel ratio for crisp rendering

fn set_stroke_color(&mut self, color: &str)

Set stroke color (hex string like “#RRGGBB” or “#RRGGBBAA”)

fn set_stroke_width(&mut self, width: f64)

Set stroke width in pixels

fn set_line_dash(&mut self, pattern: &[f64])

Set line dash pattern (empty for solid)

fn set_line_cap(&mut self, cap: &str)

Set line cap style (“butt”, “round”, “square”)

fn set_line_join(&mut self, join: &str)

Set line join style (“miter”, “round”, “bevel”)

fn set_fill_color(&mut self, color: &str)

Set fill color (hex string)

fn set_global_alpha(&mut self, alpha: f64)

Set global alpha (transparency)

fn begin_path(&mut self)

Begin a new path

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

Move to point (without drawing)

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

Draw line to point

fn close_path(&mut self)

Close the current path

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

Add rectangle to current path (without stroking or filling)

fn arc( &mut self, cx: f64, cy: f64, radius: f64, start_angle: f64, end_angle: f64, )

Draw arc (for partial circles)

fn ellipse( &mut self, cx: f64, cy: f64, rx: f64, ry: f64, rotation: f64, start: f64, end: f64, )

Draw ellipse (center, radii, rotation, start_angle, end_angle)

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

Quadratic bezier curve

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

Cubic bezier curve

fn stroke(&mut self)

Stroke the current path

fn fill(&mut self)

Fill the current path

fn clip(&mut self)

Clip to the current path

fn stroke_rect(&mut self, x: f64, y: f64, w: f64, h: f64)

Stroke a rectangle

fn fill_rect(&mut self, x: f64, y: f64, w: f64, h: f64)

Fill a rectangle

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

Set font (CSS-style: “14px sans-serif” or “bold 16px monospace”)

fn set_text_align(&mut self, align: TextAlign)

Set text horizontal alignment

fn set_text_baseline(&mut self, baseline: TextBaseline)

Set text vertical baseline

fn fill_text(&mut self, text: &str, x: f64, y: f64)

Fill text at position

fn stroke_text(&mut self, text: &str, x: f64, y: f64)

Stroke text at position

fn measure_text(&self, text: &str) -> f64

Measure text width

fn save(&mut self)

Save current state (transforms, styles)

fn restore(&mut self)

Restore previously saved state

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

Translate origin

fn rotate(&mut self, angle: f64)

Rotate around origin

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

Scale from origin

Provided Methods

fn set_fill_color_alpha(&mut self, color: &str, alpha: f64)

Set fill color with alpha transparency Default implementation uses set_fill_color + set_global_alpha

fn reset_alpha(&mut self)

Reset global alpha to 1.0

fn clip_rect(&mut self, x: f64, y: f64, width: f64, height: f64)

Set a clipping rectangle. All subsequent drawing operations will be clipped to this rect. This is a convenience method that creates a rect path and applies it as a clip. Must be called within save/restore to limit the clip scope.

fn fill_rounded_rect(&mut self, x: f64, y: f64, w: f64, h: f64, radius: f64)

Fill a rounded rectangle (convenience method with default impl)

fn stroke_rounded_rect(&mut self, x: f64, y: f64, w: f64, h: f64, radius: f64)

Stroke a rounded rectangle

fn rounded_rect(&mut self, x: f64, y: f64, w: f64, h: f64, r: f64)

Add rounded rectangle to path (default impl using arcs)

fn fill_text_rotated(&mut self, text: &str, x: f64, y: f64, angle: f64)

Fill text with rotation around the anchor point. Default implementation uses save/translate/rotate/fill_text/restore.

fn fill_text_centered(&mut self, text: &str, x: f64, y: f64)

Fill text centered at position. Default implementation sets alignment and baseline then calls fill_text.

fn draw_image( &mut self, image_id: &str, x: f64, y: f64, width: f64, height: f64, ) -> bool

Draw an image at the specified position

Arguments

• image_id - Unique identifier for the cached image (URL or data URI)
• x, y - Top-left corner position
• width, height - Dimensions to draw the image

Returns true if the image was drawn, false if not yet loaded/cached.

fn draw_image_rgba( &mut self, data: &[u8], img_width: u32, img_height: u32, x: f64, y: f64, width: f64, height: f64, )

Draw raw RGBA pixel data as an image

Arguments

• data - RGBA pixel data (4 bytes per pixel, row-major, top-to-bottom)
• img_width, img_height - Source image dimensions in pixels
• x, y - Top-left corner position on canvas
• width, height - Target dimensions to draw (stretches/shrinks to fit)

Default implementation does nothing. Override in platform-specific contexts.

fn draw_blur_background(&mut self, x: f64, y: f64, width: f64, height: f64)

Draw blurred background for UI elements (FrostedGlass/LiquidGlass effects)

When a blur-enabled style is active, this draws a clipped portion of the blurred chart texture as background for UI elements like toolbars, sidebars, modals.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the blur region

Default implementation does nothing. Override in platform-specific contexts that support blur effects (e.g., VelloGpuRenderContext).

fn has_blur_background(&self) -> bool

Check if blur background is available

Returns true if blur image is set and ready for drawing. Use this to conditionally draw blur backgrounds only when supported.

fn use_convex_glass_buttons(&self) -> bool

Check if 3D convex glass buttons should be used

Returns true if blur is active AND convex glass button style is enabled.

fn draw_hover_rect( &mut self, x: f64, y: f64, width: f64, height: f64, color: &str, )

Draw a hover state rectangle

Centralized rendering for hover states on UI elements. For FrostedGlass/LiquidGlass with Convex3D style, uses 3D glass button effect.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the rectangle
• color - Fill color (should be styled via theme.hover_bg_styled())

fn draw_active_rect( &mut self, x: f64, y: f64, width: f64, height: f64, color: &str, )

Draw an active state rectangle

Centralized rendering for active/pressed states on UI elements. For FrostedGlass/LiquidGlass with Convex3D style, uses 3D glass button effect.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the rectangle
• color - Fill color (should be styled via theme.active_bg_styled())

fn draw_hover_rounded_rect( &mut self, x: f64, y: f64, width: f64, height: f64, radius: f64, color: &str, )

Draw a hover state rounded rectangle

Centralized rendering for hover states on toolbar buttons. For FrostedGlass/LiquidGlass with Convex3D style, uses 3D glass button effect.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the rectangle
• radius - Corner radius
• color - Fill color (should be styled via theme.hover_bg_styled())

fn draw_active_rounded_rect( &mut self, x: f64, y: f64, width: f64, height: f64, radius: f64, color: &str, )

Draw an active state rounded rectangle

Centralized rendering for active/pressed states on toolbar buttons. For FrostedGlass/LiquidGlass with Convex3D style, uses 3D glass button effect.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the rectangle
• radius - Corner radius
• color - Fill color (should be styled via theme.active_bg_styled())

fn draw_sidebar_hover_item( &mut self, x: f64, y: f64, width: f64, height: f64, accent_color: &str, bg_color: &str, indicator_width: f64, )

Draw a sidebar hover item with vertical accent indicator

Centralized rendering for hovered sidebar tabs/items. Draws a vertical accent bar on the left + hover background. Used for vertical toolbars in FrostedGlass/LiquidGlass styles.

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the item
• accent_color - Color for the left accent bar (theme.colors.accent)
• bg_color - Background color (theme styled hover color)
• indicator_width - Width of the accent bar (typically 3-4px)

fn draw_sidebar_active_item( &mut self, x: f64, y: f64, width: f64, height: f64, accent_color: &str, bg_color: &str, indicator_width: f64, )

Draw a sidebar active item with vertical accent indicator

Centralized rendering for active sidebar tabs/items. Draws a vertical accent bar on the left + active background. Used in modal sidebars (Chart Settings, Indicator Settings, Add Indicator, etc.)

Arguments

• x, y - Top-left corner position
• width, height - Dimensions of the item
• accent_color - Color for the left accent bar (theme.colors.accent)
• bg_color - Background color (theme styled active color)
• indicator_width - Width of the accent bar (typically 3-4px)

fn draw_glass_button_3d( &mut self, x: f64, y: f64, width: f64, height: f64, radius: f64, _is_active: bool, color: &str, )

Draw a 3D convex glass button effect

Creates iOS-style raised glass button with:

• Blur background (backdrop)
• Theme color overlay (hover/active color from theme)
• Convex bulge effect (lighter top, darker bottom)
• Specular highlight (white stripe at top)
• Inner shadow (depth at edges)
• Fresnel rim lighting (subtle edge glow)

Only has visual effect when blur background is available (Glass styles). Falls back to simple hover/active rendering otherwise.

Arguments

• x, y - Top-left corner position
• width, height - Button dimensions
• radius - Corner radius
• is_active - true for pressed state (flattened bulge), false for hover
• color - Theme color for the button (hover_bg or active_bg)

Implementors