YouTip LogoYouTip

Home > HTML > Att Canvas Height

Att Canvas Height

📅 2026-06-14 | 📂 HTML
## HTML <canvas> height Attribute The `height` attribute of the `` element specifies the vertical height of the canvas drawing area in pixels. --- ## Quick Example Below is an example of a `` element configured with a height and width of 200 pixels: ```html Your browser does not support the HTML5 canvas tag. ``` --- ## Browser Support The `height` attribute is supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Opera * Microsoft Edge *Note: Internet Explorer 8 and earlier versions do not support the `` tag.* --- ## Definition and Usage The `height` attribute defines the height of the coordinate space (the drawing buffer) of the `` element. ### Key Behaviors: * **Default Value:** If the `height` attribute is not specified, it defaults to **150** pixels (while the default `width` is 300 pixels). * **Clearing the Canvas:** Whenever the `height` or `width` attribute of a canvas is modified or reset (even if it is set to its existing value), the canvas context is automatically reset, and all drawn content is cleared. --- ## HTML 4.01 vs. HTML5 The `` element and its associated `height` attribute are new features introduced in **HTML5**. They were not part of the HTML 4.01 specification. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *pixels* | Specifies the height of the canvas in pixels (e.g., `"200"`). The default value is `"150"`. | --- ## Important Considerations: Attribute vs. CSS Styling When working with the `` element, it is crucial to understand the difference between setting the height via the HTML attribute versus setting it via CSS. 1. **HTML Attribute (`height="200"`):** This sets the actual resolution of the canvas drawing buffer. It determines how many pixels are available for rendering graphics. 2. **CSS Style (`style="height: 200px;"`):** This sets the display size of the canvas element on the page. If you set the CSS height without setting the HTML attribute height, the browser will take the default canvas resolution (300x150) and stretch or squash it to fit the CSS dimensions. This often results in blurry, pixelated, or distorted graphics. ### Recommended Practice Always set the drawing resolution using the HTML `width` and `height` attributes: ```html ``` --- ## Advanced Examples ### 1. Drawing on a Canvas with Specified Height This example demonstrates how to define a canvas height and draw a simple rectangle inside it using JavaScript. ```html Canvas Height Example Your browser does not support the HTML5 canvas tag. ``` ### 2. Clearing the Canvas by Resetting the Height You can dynamically clear the canvas and reset its state by reassigning its `height` property in JavaScript. ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // Draw something on the canvas ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); // Clear the canvas and reset all context properties (like fillStyle, lineWidth, etc.) canvas.height = canvas.height; ```
← Att Canvas WidthAtt Button Value →

📂 Categories