Canvas
The canvas element is a powerful tool for creating graphics and interactive visual elements directly in a web browser. It is a container for drawing graphics using JavaScript. Unlike traditional image elements, the canvas element is dynamic, allowing developers to draw, manipulate, and animate content programmatically.
Key Features of HTML Canvas
- Drawing Shapes: You can draw basic shapes like rectangles, circles, lines, and complex paths.
- Rendering Text: Text can be rendered and styled within the canvas.
- Animations:The canvas is ideal for creating animations, such as moving objects or transitions.
HTML Canvas Code Example
1-<!DOCTYPE html>
2-<html>
3-<head>
4-<title>Render Code as Text</title>
5-</head>
6-<body>
7-<canvas id="myCanvas" width="200" height="200" style="border:1px solid #FF0000;"></canvas>
8-<script>
// Get the canvas element
9-var canvas = document.getElementById("myCanvas");
10-var ctx = canvas.getContext("2d");
// Draw a rectangle
11-ctx.fillStyle = "blue";
12-ctx.fillRect(50, 50, 150, 100);
// Draw a circle
13-ctx.beginPath();
14-ctx.arc(300, 150, 50, 0, 2 * Math.PI);
15-ctx.fillStyle = "red";
16-ctx.fill();
17-ctx.stroke();
18-</script>
Here is the output of the code above
The <canvas> element is an HTML tag that creates a rectangular area on a web page where you can draw graphics, shapes, images, or animations using JavaScript. It’s like a blank drawing board where you can create visual content dynamically.
Code Breakdown: Line by Line Explanation
Lines 1-2: Document Structure Setup
- <!DOCTYPE html>: This declaration tells the browser that the document uses HTML5, the latest version of HTML.
- <html>: This is the root element of the webpage where all the content resides.
Lines 3-5: Document Head
- <head>: This section contains metadata (information about the webpage) that isn’t directly displayed on the screen.
- <title>: Specifies the title of the webpage, shown in the browser tab. Here, it’s set to “Render Code as Text
Lines 6-7: Body Section with Canvas
- <body>: The main section where visible content is placed.
- <canvas>: This tag creates a rectangular area on the page where you can draw graphics like shapes, images, or animations using JavaScript.
- id=”myCanvas”: Assigns a unique identifier to the canvas so it can be accessed via JavaScript. width=”200″ and height=”200″: Set the dimensions of the canvas to 200 pixels by 200 pixels. style=”border:1px solid #FF0000;”: Adds a 1-pixel-wide solid red border around the canvas.
Lines 9-10: Accessing the Canvas
- document.getElementById(“myCanvas”): This fetches the canvas element by its ID (myCanvas) so we can interact with it.
- getContext(“2d”): Creates a 2D rendering context, which provides methods to draw shapes and images.
Lines 11-12: Drawing a Rectangle
Lines 13-17: Drawing a Circle
What Does the Code Do?
- Canvas Setup: A 200×200-pixel canvas is created with a red border.
- Rectangle Drawing: A blue rectangle is drawn starting at (50, 50) with a width of 150 pixels and a height of 100 pixels.
- Circle Drawing: A red circle is drawn with its center at (300, 150) and a radius of 50 pixels. The circle is filled with red and outlined.
Output on the Screen
- A canvas with a red border.
- Inside the canvas:
- A blue rectangle positioned towards the left.
- A red circle positioned towards the right.