For more questions and answers visit our website at Frontend Interview Questions
What is the <canvas> Element?
The <canvas> element is a rectangular area defined in HTML where you can use JavaScript to draw shapes, text, images, and other visual elements. The canvas is resolution-independent and can scale without losing quality, making it ideal for various applications.
Basic Structure of the <canvas> Element
Here’s the basic syntax of the <canvas> element:
<canvas id="myCanvas" width="500" height="400"></canvas>id: A unique identifier for the canvas element.widthandheight: Define the dimensions of the canvas.
Example 1: Drawing a Rectangle
In this example, we’ll create a simple canvas that draws a filled rectangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Rectangle Example</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Draw a Rectangle on Canvas</h1>
<canvas id="rectangleCanvas" width="300" height="200"></canvas>
<script>…