HTML Canvas Drawing 🎯

Welcome to our in-depth guide on HTML Canvas Drawing! This tutorial is designed for both beginners and intermediate learners. By the end of this lesson, you'll be able to create amazing graphics and animations using HTML5 Canvas. Let's dive in!

What is HTML Canvas? 📝

HTML Canvas is a powerful HTML5 feature that allows you to draw graphics, animations, and interactive content directly in the browser. It's an area on the web page that can be dynamically updated through JavaScript.

Setting Up the Canvas 💡

To create a canvas, we need to add a <canvas> element in our HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

📝 Note: A canvas needs both width and height attributes to be rendered correctly.

Accessing the Canvas ✅

To interact with the canvas, we need to access it using JavaScript. We can do this by getting a reference to the canvas using its ID:

javascript

const canvas = document.getElementById('myCanvas');

Drawing on the Canvas 💡

To draw on the canvas, we need to get the drawing context using the getContext() method:

javascript

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

📝 Note: '2d' stands for two-dimensional context, which is used for basic drawing operations.

Basic Drawing Operations 💡

Now that we have the context, we can start drawing! Let's begin with some basic shapes:

Rectangles

To draw a rectangle, use the fillRect() method:

javascript

ctx.fillRect(x, y, width, height);

Circles

To draw a circle, use the arc() method:

javascript

ctx.arc(x, y, radius, startAngle, endAngle);

Lines

To draw a line, use the moveTo() and lineTo() methods:

javascript

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);

Stroking and Filling 💡

To stroke (outline) or fill the shapes we've drawn, we can use the stroke() and fill() methods respectively:

javascript

ctx.stroke(); // To stroke (outline) the shape
ctx.fill(); // To fill the shape

📝 Note: By default, the stroke style is a thin black line. You can change this by setting the stroke style with strokeStyle property.

Quiz 💡

Quick Quiz

Question 1 of 1

What method is used to draw a rectangle in HTML Canvas?

Colors and Gradients 💡

To change the color of our drawings, we can use the fillStyle and strokeStyle properties:

javascript

ctx.fillStyle = 'red'; // To fill the shape with red color
ctx.strokeStyle = 'blue'; // To stroke (outline) the shape with blue color

Creating Gradients 💡

To create gradients, we can use the createLinearGradient() and createRadialGradient() methods:

javascript

const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;

Quiz 💡

Quick Quiz

Question 1 of 1

Which method is used to create a gradient in HTML Canvas?

Putting it all Together 💡

Let's create a simple example where we draw a filled red circle and a blue line:

javascript

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

// Set the canvas background color
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw a filled red circle
ctx.beginPath();
ctx.arc(50, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

// Draw a blue line
ctx.beginPath();
ctx.moveTo(70, 30);
ctx.lineTo(90, 70);
ctx.strokeStyle = 'blue';
ctx.stroke();

Advanced Topics 💡

In this tutorial, we've covered the basics of HTML Canvas drawing. To explore more advanced topics like animations, image manipulation, and interactive graphics, consider checking out our other tutorials on CodeYourCraft.

Happy coding! 🎯