Setting Up the Canvas and 2D Context
Create a canvas element and acquire the 2D rendering context.
The canvas Element
The <canvas> element is a drawable bitmap surface in the browser:
<canvas id="myCanvas" width="800" height="400">
<!-- Fallback for browsers without canvas support -->
<p>Your browser does not support HTML5 Canvas.</p>
</canvas>Width and Height Attributes
Always set canvas dimensions via HTML attributes, not CSS:
<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>
<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
Result: blurry graphics -->All lessons in this course
- Setting Up the Canvas and 2D Context
- Drawing Rectangles and Paths
- Text and Images on Canvas
- Animation with requestAnimationFrame