Syntax
<canvas id="myCanvas" width="400" height="300"></canvas>Examples
Basic Canvas Setup
Creating a canvas and drawing a simple rectangle.
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "#3b82f6";
ctx.fillRect(20, 20, 100, 80);
</script>Drawing a Circle
Using canvas arc methods to draw shapes.
<canvas id="circleCanvas" width="200" height="200"></canvas>
<script>
const ctx = document.getElementById("circleCanvas").getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = "#10b981";
ctx.fill();
</script>Fallback Content
Providing fallback content for browsers or users without canvas/script support.
<canvas id="chart" width="400" height="200">
Your browser does not support canvas. Here is a summary: Sales grew 20% in Q2.
</canvas>Attributes
- width (number): The canvas width in pixels (default 300)
- height (number): The canvas height in pixels (default 150)
Best practices
- Set width/height as HTML attributes rather than CSS to avoid blurry, stretched rendering
- Provide meaningful fallback content between the tags for cases where canvas or JavaScript is unavailable
- For charts, diagrams, or icons that need to stay interactive and accessible as individual elements, consider SVG instead of canvas
- Canvas content is not part of the accessibility tree by default — add ARIA attributes or fallback text for accessibility when the content is meaningful
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<script>
The <script> element embeds or references executable JavaScript code within an HTML document. It can contain inline code directly between its tags, or load an external file via the src attribute. Where scripts are placed and how they load (defer, async, or neither) significantly affects page load performance and execution order.<noscript>
The <noscript> element defines content to display only when JavaScript is disabled or unsupported in the browser. It commonly contains a message explaining that the page requires JavaScript, or a fallback version of functionality that would otherwise depend on scripting.<template>
The <template> element holds HTML content that the browser parses but does not render or execute when the page loads. Its content is inert — scripts inside it will not run, and images inside it will not load — until it is cloned into the visible DOM via JavaScript. This makes it a clean way to define reusable markup fragments for dynamic UI without building HTML strings in JavaScript.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.
The <script> element embeds or references executable JavaScript code within an HTML document. It can contain inline code directly between its tags, or load an external file via the src attribute. Where scripts are placed and how they load (defer, async, or neither) significantly affects page load performance and execution order.<noscript>
The <noscript> element defines content to display only when JavaScript is disabled or unsupported in the browser. It commonly contains a message explaining that the page requires JavaScript, or a fallback version of functionality that would otherwise depend on scripting.<template>
The <template> element holds HTML content that the browser parses but does not render or execute when the page loads. Its content is inert — scripts inside it will not run, and images inside it will not load — until it is cloned into the visible DOM via JavaScript. This makes it a clean way to define reusable markup fragments for dynamic UI without building HTML strings in JavaScript.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.