• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Canvas

← Previous Next →

The HTML <canvas> element is used to draw graphics on a web page using JavaScript. It can be used to render shapes, graphs, game visuals, animations, and more.

🔹 By itself, <canvas> is just a container — the actual drawing is done using JavaScript.

🔹 Basic Syntax

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;">
  Your browser does not support the canvas tag.
</canvas>

If the browser doesn't support <canvas>, the fallback text inside the tag is shown.

🔹 Getting the Drawing Context

To draw on the canvas, you need to access its 2D drawing context in JavaScript:

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

🔹 Drawing on the Canvas

✅ Draw a Line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
✅ Draw a Rectangle
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);  // x, y, width, height
✅ Draw a Circle
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.stroke();
✅ Write Text
ctx.font = "20px Arial";
ctx.fillText("Hello Canvas", 50, 50); // text, x, y
✅ Draw Image
const img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0);
};
img.src = "image.jpg";

Practice Questions

Q1. Create a <canvas> element of size 400x200 with a border.

Q2. Draw a horizontal line from (10,10) to (200,10).

Q3. Fill a blue rectangle from (30,30) with width=100, height=50.

Q4. Draw a circle with radius 40 at the center (100,100).

Q5. Display the text "Canvas Rocks!" on canvas at position (50,80).

Q6. Use JavaScript to change the fill color to green.

Q7. Load and draw an image onto the canvas.

Q8. Create a triangle using lineTo() method.

Q9. Draw two overlapping rectangles with different colors.

Q10. Use canvas to simulate a basic graph bar or grid.

HTML Canvas Quiz

Q1: What is the purpose of <canvas> in HTML?

A. To create a table
B. To draw graphics using JavaScript
C. To write form data
D. To style web pages

Q2: Which JavaScript method gets the 2D drawing context of a canvas?

A. get2D()
B. getDraw()
C. getContext("2d")
D. drawContext()

Q3: What does ctx.beginPath() do?

A. Starts a new browser window
B. Begins a new path to draw shapes
C. Clears the canvas
D. Fills color

Q4: How do you draw a filled rectangle?

A. ctx.fillBox()
B. ctx.fillRect()
C. ctx.drawRect()
D. ctx.box()

Q5: Which method is used to write text on canvas?

A. ctx.writeText()
B. ctx.print()
C. ctx.fillText()
D. ctx.addText()

Q6: What does ctx.stroke() do?

A. Removes the path
B. Closes the canvas
C. Strokes the current path
D. Adds an image

Q7: What does ctx.arc() draw?

A. Square
B. Line
C. Image
D. Circle or arc

Q8: Which HTML tag is used to define a canvas?

A. <draw>
B. <canvas>
C. <svg>
D. <shape>

Q9: What happens if the browser does not support canvas?

A. It crashes
B. It shows a fallback message inside <canvas>
C. It skips rendering
D. It renders with SVG

Q10: What is the use of ctx.drawImage()?

A. Add a background color
B. Write text
C. Draw an image onto canvas
D. Convert canvas to image
← Previous Next →
Login
Go Back Top