To start drawing 20 figures with HTML canvas, you must first create the canvas element and get the 2D context; 1. Add a tag with id, width and height in HTML; 2. Use JavaScript to get canvas through getElementById and call getContext('2d') to get the drawing context; 3. Use fillRect and strokeRect to draw rectangles; 4. Use beginPath, moveTo, lineTo and closePath to create paths to draw custom shapes such as triangles; 5. Use arc method to draw circles or arcs; 6. Set fillStyle, strokeStyle, lineWidth and other properties for style design; 7. Create linear or radial gradients and apply them to fill; 8. Use font, fillText and strokeText to draw solid or stroke text; 9. Control text alignment through textAlign and textBaseline; 10. Load Image objects and draw images to the canvas with drawImage; 11. To implement animation, you need to clear the canvas, update the location, and repaint the drawing; 12. Use requestAnimationFrame to create a smooth animation loop; 13. Avoid using CSS to set the canvas size to prevent blur; 14. Minimize the redraw area to improve performance; 15. You can cache complex graphics to off-screen canvas reuse; 16. Use getImageData and putImageData with caution due to high performance overhead; 17. Use requestAnimationFrame instead of setInterval; 18. You can use multiple canvas to optimize rendering in layers; 19. After mastering the basic drawing API, gradually combine complex visual effects; 20. Start with simple shapes, gradually add colors, animations and interactions to complete rich graphics applications.

The HTML <canvas></canvas> element is a powerful tool for rendering dynamic 2D graphics directly in the browser using JavaScript. Unlike SVG or CSS-based graphics, canvas operates as a bitmap—once something is drawn, it's just pixels. This makes it ideal for games, data visualizations, animations, and real-time rendering.

Here's a practical guide to getting started with the canvas element for 20 graphics.

Setting Up the Canvas Element

To begin, you need to add a <canvas></canvas> tag to your HTML. It acts as a container for graphics, but by itself, it does nothing.

 <canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

You should always set width and height attributes directly on the canvas (not via CSS) to avoid scaling issues. CSS can stretch the canvas, leading to blurry graphics.

After placing the canvas, access it in JavaScript and get the 2D drawing context:

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

The ctx object is your main tool for drawing shapes, text, images, and more.

Drawing Basic Shapes

With the 2D context, you can draw rectangles, paths, circles, and lines.

Rectangles

Canvas has built-in methods for rectangles:

• fillRect(x, y, width, height) – draws a filled rectangle
• strokeRect(x, y, width, height) – draws an outlined rectangle
• clearRect(x, y, width, height) – clears a rectangular area

Example:

 ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);

ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(120, 10, 100, 50);

Paths and Lines

For custom shapes, use paths:

 ctx.beginPath();
ctx.moveTo(200, 20); // Start point
ctx.lineTo(250, 80); // Draw line to
ctx.lineTo(150, 80);
ctx.closePath(); // Connect back to start
ctx.fillStyle = 'green';
ctx.fill();

This draws a filled triangle.

Circles and Arcs

Use arc() to draw circles or parts of circles:

 ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'purple';
ctx.fill();

You can create pie charts, clocks, or custom curves by adjusting the angles.

Styling and Colors

Canvas lets you control how shapes look:

• fillStyle – sets color, gradient, or pattern for fills
• strokeStyle – same, but for outlines
• lineWidth , lineCap , lineJoin – control line appearance

Examples:

 ctx.fillStyle = '#FF5733';
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
ctx.lineWidth = 4;
ctx.lineCap = 'round'; // 'butt', 'round', or 'square'

You can also use gradients:

 const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'yellow');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(10, 130, 200, 60);

Drawing Text and Images

Text

Canvas supports text rendering with control over font, alignment, and style:

 ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 170);
ctx.strokeText('Outline Text', 10, 200);

Use textAlign ( start , end , center , left , right ) and textBaseline ( top , middle , bottom ) for precision placement.

Images

You can draw images from <img alt="A Guide to the HTML Canvas Element for 2D Graphics" > elements or other sources:

 const img = new Image();
img.src = 'picture.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 150, 100); // image, x, y, width, height
};

drawImage() is versatile—it can also slice and scale parts of images.

Animation Basics

Canvas shines with animation. To animate, you typically:

1. Clear the canvas
2. Update object positions
3. Redraw everything
4. Repeat using requestAnimationFrame

Example: Moving circle

 let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear
  ctx.beginPath();
  ctx.arc(x, 150, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();

  x = 2;
  if (x > canvas.width) x = 0;

  requestAnimationFrame(animate);
}

animate();

This loop creates smooth motion by syncing with the browser's refresh rate.

Performance Tips and Best Practices

• Avoid unnecessary redraws : Only redraw what changed, or use multiple canvases (eg, one for background, one for moving objects).
• Cache complex drawings : If a shape doesn't change, draw it once offscreen and reuse with drawImage() .
• Limit getImageData / putImageData : These are slow; use sparingly for pixel manipulation.
• Use requestAnimationFrame instead of setInterval for smoother, efficient animation.

Canvas gives you full control over 2D rendering. While it lacks built-in object management (you're drawing pixels, not DOM elements), that same low-level access enables high-performance visuals. With practice, you can build anything from charts to games.

Basically, start small—draw a shape, add color, animate it—and build up from there.

The above is the detailed content of A Guide to the HTML Canvas Element for 2D Graphics. For more information, please follow other related articles on the PHP Chinese website!