| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
The ‘<canvas>‘ element in HTML is used to draw graphics on a web page via scripting (usually JavaScript). It is a part of HTML5 and provides a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
Basic Structure of 'canvas'
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.
</canvas>
- ‘
id‘: Used to identify the canvas element so that you can target it with JavaScript. - ‘
width‘: Specifies the width of the canvas in pixels. Default is 300 pixels. - ‘
height‘: Specifies the height of the canvas in pixels. Default is 150 pixels.
The content inside the <canvas> tag is displayed only if the browser does not support the canvas element.
How to Use the 'canvas' Element
The ‘<canvas>‘ element alone is just a container; you must use JavaScript to draw anything inside it.
Example: Drawing a Rectangle
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Drawing a rectangle
ctx.fillStyle = "#FF0000"; // Red color
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
- ‘
getContext("2d")‘: This method returns a drawing context on the canvas. The “2d” context allows you to draw on the canvas using methods such as ‘fillRect()‘,’strokeRect()‘,’clearRect()‘, and more. - ‘
fillStyle‘: Sets the color to fill the shapes. - ‘
fillRect(x,y,width,height)‘: Draws a filled rectangle on the canvas
Common Canvas Methods
Drawing Shapes:
fillRect(x,y,width,height): Draws a filled rectangle.strokeRect(x,y,width, height): Draws a rectangular outline.clearRect(x.y,width, height): Clears the specified rectangular area, making it fully transparent.
Drawing Paths:
- ‘
beginPath()‘: Begins a new path or resets the current path. - ‘
moveTo(x,y)‘: Moves the path to the specified point in the canvas, without creating a line. - ‘
lineTo(x,y)‘: Adds a new point and creates a line to that point from the last specified point. - ‘
stroke()‘: Draws the path you have defined.
- ‘
Text:
- ‘
fillText(text,x,y)‘: Draws filled text at the specified location. - ‘
strokeText(text,x,y)‘: Draws text outlines at the specified location. - ‘
font‘: Sets the current text style. - ‘
textAlign‘: Sets the text alignment.
- ‘
Example: Drawing a Line and Text
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Drawing a line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke(); // Draws the line
// Drawing text
ctx.font = "20px Arial";
ctx.fillText("Hello Canvas", 50, 50); // Adds the text
</script>
</body>
</html>
- ‘
moveTo(x,y)‘ and ‘lineTo(x,y)‘: Used to create the path for the line. - ‘
stroke()‘: Renders the line. - ‘
fillText(text,x,y)‘: Places the text “Hello Canvas” at the specified coordinates.
Advanced Canvas Features
1. Images:
- You can draw images on the canvas using the ‘
drawImage()‘ method.
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'https://www.example.com/image.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
</script>
2. Gradients:
- Create gradient effects using ‘
createLinearGradient()‘or ‘createRadialGradient()‘.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 180, 80);
</script>
3. Animations:
- You can create animations using ‘
requestAnimationFrame()‘, which allows smooth animation on the canvas.
The <canvas> element is a powerful tool in HTML for drawing graphics directly in the browser. With the ability to render shapes, images, and text dynamically, it opens up possibilities for creating rich visual content, including charts, games, and interactive applications.
