Introduction to HTML Basic HTML Document Structure Headings Paragraphs Line Break and Horizontal Rule Text Formatting Tags Comments Attributes Links Open Link in New Tab Images Image as Link Favicon Lists Ordered Lists Description Lists Nested Lists Tables Table Caption and Spanning Block and Inline Elements div Element span Element Semantic HTML Layout Elements Forms Input Types Labels Radio Buttons and Checkboxes Select and Option Textarea Button Fieldset and Legend Datalist Output Element Form Validation Attributes Audio Video iframe embed Element Figure and Figcaption Details and Summary Progress and Meter Time and Data Elements Canvas SVG Responsive Images Accessibility Basics SEO-Oriented HTML Global Attributes Event Attributes Image Map Iframe for Maps or Video Metadata and Head Elements HTML Entities, Symbols, and Emojis Deprecated and Legacy Tags

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillRect(20, 20, 100, 50);
</script>

<canvas id="box" width="200" height="100" style="border:1px solid black;"></canvas>
<script>
const c = document.getElementById("box");
const ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 120, 50);
</script>

A canvas area appears with a blue rectangle drawn inside it.