How to Use the HTML5 Canvas Element? (Beginner's Tutorial)

Canvas requires an HTML tag with id, width, and height attributes; in JavaScript, get the element and 2D context, then draw shapes, style them, and animate by clearing and redrawing each frame.

Start by adding a <canvas></canvas> tag to your HTML — it’s just a container with no visual content until you draw on it using JavaScript.

Set up the canvas element

Place the <canvas></canvas> tag in your HTML with id, width, and height attributes. Avoid setting size via CSS alone — that stretches the canvas instead of resizing its drawing area.

• Use <canvas id="myCanvas" width="500" height="300"></canvas>
• In JavaScript, get a reference: const canvas = document.getElementById('myCanvas');
• Then get the 2D rendering context: const ctx = canvas.getContext('2d');

Draw basic shapes

The 2D context provides methods for rectangles, lines, arcs, and paths. You define the shape, then stroke or fill it.

• Fill a rectangle: ctx.fillRect(10, 10, 100, 50);
• Stroke a rectangle: ctx.strokeRect(10, 80, 100, 50);
• Draw a line: ctx.beginPath(); ctx.moveTo(20, 150); ctx.lineTo(120, 150); ctx.stroke();
• Draw a circle: ctx.beginPath(); ctx.arc(200, 100, 30, 0, Math.PI * 2); ctx.fill();

Add color and style

Control appearance using properties like fillStyle, strokeStyle, lineWidth, and font.

• Change fill color: ctx.fillStyle = '#ff6b6b';
• Change stroke color and thickness: ctx.strokeStyle = 'blue'; ctx.lineWidth = 3;
• Draw text: ctx.font = '20px Arial'; ctx.fillText('Hello', 10, 30);
• Clear part of the canvas: ctx.clearRect(0, 0, 100, 100);

Update and animate drawings

Canvas doesn’t retain objects — it’s a bitmap. To animate, clear the canvas and redraw updated content each frame.

• Use requestAnimationFrame() for smooth animation
• Redraw everything inside the animation loop — no “moving” an existing shape
• Example: update position variables, clear canvas, then draw at new coordinates

Canvas gives you pixel-level control but expects you to manage state and redrawing manually. It’s simple to start with, powerful to build on.

The above is the detailed content of How to Use the HTML5 Canvas Element? (Beginner's Tutorial). For more information, please follow other related articles on the PHP Chinese website!