JavaScript Cheat Sheet 11.1.9:HTML Canvas

HTML Canvas Programming with JavaScript

HTML Canvas is a powerful tool that allows you to draw graphics, animations, and interactive content directly within a web page using JavaScript. In this tutorial, we will cover the basics of programming with HTML Canvas using JavaScript. By the end of this tutorial, you will understand how to create and manipulate graphics on a canvas element.

Setting up the Canvas

To get started, create an HTML file and add a canvas element to it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Canvas Tutorial</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

In this code snippet, we have added a canvas element with an id of “myCanvas” and specified its width and height.

Accessing the Canvas Element

Next, we need to access the canvas element using JavaScript and obtain its 2D rendering context.

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

Here, we first retrieve the canvas element using its id, and then we obtain the 2D rendering context of the canvas using the getContext() method with the argument ‘2d’.

Drawing Shapes:
Now, let’s draw some basic shapes on the canvas.

a. Drawing a Rectangle:

ctx.fillStyle = 'red'; // Set fill color
ctx.fillRect(50, 50, 100, 50); // Draw filled rectangle

Explanation:

fillStyle property sets the fill color.
fillRect(x, y, width, height) method draws a filled rectangle at the specified position (x, y) with the specified width and height.

b. Drawing a Circle:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue'; // Set fill color
ctx.fill(); // Fill the circle

Explanation:

beginPath() method starts a new path.
arc(x, y, radius, startAngle, endAngle) method creates an arc/curve.
fill() method fills the current path with the current fill style.

c. Drawing a Line:

ctx.moveTo(300, 150); // Move to starting point
ctx.lineTo(400, 150); // Draw a line to end point
ctx.strokeStyle = 'green'; // Set stroke color
ctx.stroke(); // Draw the line

Explanation:

moveTo(x, y) method moves the drawing cursor to the specified point.
lineTo(x, y) method draws a straight line from the current position to the specified point.
strokeStyle property sets the stroke color.
stroke() method draws the current path with the current stroke style.

Adding Text

We can also add text to the canvas.

ctx.font = '20px Arial'; // Set font size and family
ctx.fillStyle = 'black'; // Set text color
ctx.fillText('Hello, Canvas!', 50, 180); // Draw text at position (50, 180)

Explanation:

font property sets the font size and family.
fillText(text, x, y) method draws filled text at the specified position (x, y).

Handling Animation (Optional):
HTML Canvas can also be used for animations by redrawing the canvas content repeatedly.

function draw() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw animated content here

    // Request next frame
    requestAnimationFrame(draw);
}

// Start the animation
draw();

Explanation:

clearRect(x, y, width, height) method clears the specified rectangular area.
requestAnimationFrame(callback) method requests that the browser call a specified function to update an animation before the next repaint.

Conclusion

In this tutorial, we covered the basics of programming with HTML Canvas using JavaScript. You learned how to set up a canvas, draw basic shapes, add text, and handle animations. Experiment with these concepts to create your own interactive canvas applications!

Download HTML Summary