Struct Canvas 

pub struct Canvas;

The <canvas> element - provides a bitmap drawing surface for graphics via JavaScript.

Purpose

The <canvas> element provides a resolution-dependent bitmap canvas for drawing graphics via JavaScript and the Canvas API. It can be used for rendering graphs, game graphics, animations, photo composition, real-time video processing, and other visual images on the fly.

Content Categories

• Flow Content
• Phrasing Content
• Embedded Content
• Palpable Content

Permitted Content Model

• Transparent content (fallback for browsers without canvas support)

Common Use Cases

• 2D games and interactive animations
• Data visualizations and charts
• Image editing and manipulation
• Real-time video effects and filters
• Drawing tools and diagramming applications

Key Attributes

• width: Width of the canvas in CSS pixels (default: 300)
• height: Height of the canvas in CSS pixels (default: 150)

Example

<!-- Basic canvas -->
<canvas id="myCanvas" width="800" height="600">
  Your browser doesn't support the canvas element.
</canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 100);
</script>

<!-- Canvas for charts -->
<canvas id="chart" width="600" height="400" aria-label="Sales data chart">
  <p>Sales data: Q1: $100k, Q2: $150k, Q3: $175k, Q4: $200k</p>
</canvas>

<!-- Game canvas -->
<canvas id="gameCanvas" width="1024" height="768">
  <p>This game requires a browser with canvas support.</p>
</canvas>

<!-- High DPI canvas -->
<canvas id="hdCanvas" width="1600" height="1200" style="width: 800px; height: 600px;">
  Fallback content for accessibility.
</canvas>

Accessibility

• Provide meaningful fallback content describing what the canvas shows
• Use aria-label or aria-labelledby to describe the canvas purpose
• For interactive canvases, ensure keyboard accessibility
• Consider providing alternative text-based representations of visual data
• Use ARIA live regions to announce dynamic changes
• Ensure canvas content has sufficient color contrast

WHATWG Specification

• 4.12.5 The canvas element

Trait Implementations

impl HtmlElement for Canvas

const TAG: &'static str = "canvas"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: FlowContent> CanContain<T> for Canvas

impl EmbeddedContent for Canvas

impl FlowContent for Canvas

impl PalpableContent for Canvas

impl PhrasingContent for Canvas