How to use the canvas element for drawing in HTML5

To draw a graph using HTML5's <canvas> element, first set the canvas tag in HTML and get the 2D rendering context, then draw the shapes, add styles, text, images, and animations through JavaScript. 1. Set the canvas element: add the <canvas> tag with id, width and height attributes in HTML to define the drawing area; 2. Get the drawing context: Use document.getElementById() to get the canvas element, and call the getContext('2d') method to obtain the 2D drawing environment ctx; 3. Perform drawing operations: Use the ctx object to draw rectangles, paths, circles and other graphics, such as fillRect() to draw fill rectangles, and arc() to draw circles; 4. Set style: Control the color, line thickness and endpoint style through fillStyle, strokeStyle, lineWidth and other properties; 5. Draw text: Use the font, fillText() and strokeText() methods to draw fill or stroke text on the canvas; 6. Add images: Create Image object and use the drawImage() method to draw the image on the canvas in the onload event; 7. Implement animation: Clear the canvas by clearRect(), and loop redraw the drawing with requestAnimationFrame() to achieve smooth animation. This process fully demonstrates how to use canvas for dynamic graphics rendering, and ultimately build data visualization, games and other applications.

The <canvas></canvas> element in HTML5 lets you draw graphics dynamically using JavaScript. It's commonly used for rendering graphs, game graphics, animations, and image manipulations directly in the browser. Here's how to get started and use it effectively.

Setting up the canvas element

Start by adding the <canvas></canvas> tag to your HTML. Give it an id so you can reference it in JavaScript, and set width and height attributes.

 <canvas id="myCanvas" width="400" height="300">
  Your browser does not support the canvas element.
</canvas>

The text inside the tag appears only if the browser doesn't support <canvas> . Most modern browsers do, so this is just a fallback.

You don't need to include any extra libraries—just plain HTML and JavaScript.

Getting the drawing context

To draw on the canvas, you need to access its 2D rendering context using JavaScript.

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

The ctx object is what you'll use to issue drawing commands. All shapes, colors, and text are drawn through this context.

Drawing basic shapes

Once you have the context, you can start drawing simple shapes.

Rectangles

Rectangles are the easiest to draw because there are built-in methods for them.

• 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.

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

ctx.strokeStyle = 'red';
ctx.strokeRect(160, 50, 100, 75);

Paths and lines

For more complex shapes, use paths.

 ctx.beginPath();
ctx.moveTo(200, 20); // Start point
ctx.lineTo(250, 100); // Draw line to this point
ctx.lineTo(150, 100); // Another line
ctx.closePath(); // Close the path (optional)
ctx.fillStyle = 'green';
ctx.fill(); // Fill the shape

Circles and arcs

Use the arc() method to draw circles or parts of circles.

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

This draws a full circle. Change the angles to draw arcs or pie slices.

Styling your drawings

You can control how shapes look using various properties.

• fillStyle – sets the color, gradient, or pattern for filled shapes.
• strokeStyle – sets the color or style for outlines.
• lineWidth – sets the thickness of lines.
• lineCap – defines the style of line ends ( butt , round , square ).
• lineJoin – controls how corners are drawn ( bevel , round , miter ).

 ctx.lineWidth = 5;
ctx.strokeStyle = '#000';
ctx.lineCap = 'round';
ctx.strokeRect(30, 30, 100, 100);

Drawing text

You can also render text on the canvas.

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

• fillText() draws filled text.
• strokeText() draws outlined text.

You can also align text with textAlign ( start , end , left , right , center ) and set baseline with textBaseline .

Adding images

To draw images, use drawImage() . You must wait for the image to load first.

 const img = new Image();
img.src = 'image.png';
img.onload = function() {
  ctx.drawImage(img, 0, 0); // x, y position
  // Or: drawImage(img, x, y, width, height)
};

This is useful for games or image processing.

Animation basics

You can animate by repeatedly clearing and redrawing the canvas. Use requestAnimationFrame() for smooth performance.

 let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
  ctx.fillRect(x, 100, 50, 50);
  x = 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(animate);
}

animate();

This moves a rectangle across the screen and loops it.

Basically, the canvas gives you a blank pixel grid to draw on with code. It doesn't retain shape information—once something is drawn, it's just pixels. So if you need interactivity or object management, you'll have to track positions and states yourself.

With these basics, you can build anything from data visualizations to full browser games. The key is practicing with paths, styles, and animation loops.

The above is the detailed content of How to use the canvas element for drawing in HTML5. For more information, please follow other related articles on the PHP Chinese website!