HTML5 Canvas is a powerful tool for creating dynamic, scriptable rendering of 2D shapes and images. This article will guide you through the basics of using HTML5 Canvas with JavaScript, including setting up the canvas, drawing shapes, and creating animations.
1. Introduction to HTML5 Canvas
HTML5 Canvas is an HTML element that allows you to draw graphics via JavaScript. It provides a way to manipulate graphics on the fly, making it ideal for games, data visualization, and interactive web applications.
2. Setting Up the Canvas
To start using Canvas, you first need to include the <canvas> element in your HTML. Here’s a basic setup:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
This creates a canvas with an id of myCanvas and a size of 800×600 pixels.
3. Basic Drawing on Canvas
3.1 Drawing Rectangles
You can draw rectangles using the fillRect() and strokeRect() methods. Here’s an example:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a filled rectangle
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 100, 100);
// Draw a stroked rectangle
ctx.strokeStyle = '#00FF00';
ctx.strokeRect(120, 10, 100, 100);
3.2 Drawing Paths
Paths allow you to create custom shapes. Here’s how to draw a triangle:
ctx.beginPath();
ctx.moveTo(250, 10);
ctx.lineTo(200, 100);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.fillStyle = '#FF00FF';
ctx.fill();
3.3 Drawing Text
You can also draw text on the canvas:
ctx.font = '40px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('Hello Canvas!', 10, 150);
4. Styling Canvas Elements
4.1 Stroke and Fill Colors
Change the stroke and fill colors using strokeStyle and fillStyle:
ctx.strokeStyle = '#0000FF';
ctx.lineWidth = 2;
ctx.strokeRect(10, 150, 100, 100);
4.2 Line Width and Text Font
Adjust the line width and text font for different appearances:
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.font = 'italic 30px Arial';
ctx.fillText('Stylish Text', 10, 250);
5. Creating Animations
5.1 Using requestAnimationFrame
Animations are created using requestAnimationFrame(). Here’s a simple example of a bouncing ball:
let x = 10;
let y = 10;
let dx = 5;
let dy = 5;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = '#FF0000';
ctx.fill();
ctx.closePath();
x += dx;
y += dy;
if (x + 10 > canvas.width || x - 10 < 0) dx = -dx;
if (y + 10 > canvas.height || y - 10 < 0) dy = -dy;
requestAnimationFrame(animate);
}
animate();
6. Frequently Asked Questions
6.1 What is the difference between fill and stroke?
fillcolors the inside of a shape.strokecolors the outline of a shape.
6.2 How do I clear the canvas?
Use clearRect(0, 0, canvas.width, canvas.height).
6.3 Can I draw images on the canvas?
Yes, using drawImage(). You can draw HTML images, canvas, or video elements.
7. Conclusion
HTML5 Canvas is a versatile tool for adding dynamic graphics to your web pages. By following this guide, you’ve learned how to set up a canvas, draw basic shapes, style them, and create simple animations. Experiment with different shapes, colors, and animations to create more complex and engaging visuals!