Graphics in HTML — Interview Questions & Answers

Introduction to Graphics in HTML

Ques: What are the main ways to display graphics in HTML5?

Ans: HTML5 provides two main elements for graphics:

• <canvas> – for drawing and animations using JavaScript.
• <svg> – for vector-based graphics defined with XML.

<canvas> — Basics

Ques: What is the <canvas> element used for?

Ans: The <canvas> element is used to draw 2D graphics, shapes, images, and animations dynamically using JavaScript.

Example of a basic <canvas> setup:

<canvas id="myCanvas" width="300" height="200"></canvas>

Ques: Does <canvas> display anything by default?

Ans: No, it’s just a container. All drawings are done with JavaScript.

Drawing on Canvas (JavaScript Required)

Ques: How do you draw on a canvas?

Ans: You need to use the Canvas API via JavaScript.

Example:

<canvas id="canvas" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("canvas");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 75);
</script>

Canvas 2D Context

Ques: What is the purpose of getContext("2d")?

Ans: It returns a 2D rendering context object that provides all drawing functions for shapes, lines, text, etc.

Ques: What are some common methods of the 2D context?

Method	Description
fillRect(x, y, w, h)	Draws a filled rectangle
strokeRect(x, y, w, h)	Draws rectangle outline
clearRect(x, y, w, h)	Clears part of the canvas
beginPath()	Starts a new path
moveTo(x, y)	Moves the cursor
lineTo(x, y)	Draws a line
arc()	Draws circles/arcs
fillText(text, x, y)	Draws text
drawImage()	Draws images on canvas

Drawing Text on Canvas

Ques: How do you display text on a <canvas>?

<canvas id="textCanvas" width="300" height="100"></canvas>
<script>
  const ctx = document.getElementById("textCanvas").getContext("2d");
  ctx.font = "20px Arial";
  ctx.fillStyle = "green";
  ctx.fillText("Hello HTML5 Canvas!", 20, 50);
</script>

Canvas Animations

Ques: Can you create animations using <canvas>?

Ans: Yes, using JavaScript loops or the requestAnimationFrame() API to update drawings continuously.

Example:

<canvas id="anim" width="200" height="200"></canvas>
<script>
const ctx = document.getElementById("anim").getContext("2d");
let x = 0;
function move() {
  ctx.clearRect(0, 0, 200, 200);
  ctx.fillRect(x, 50, 50, 50);
  x += 2;
  requestAnimationFrame(move);
}
move();
</script>

Advantages & Disadvantages of <canvas>

Advantages	Disadvantages
Great for dynamic graphics and animations	Not scalable (pixel-based)
Supports real-time rendering	Accessibility is harder
Can export to images	Requires JavaScript
Fast for games & visualizations	No DOM elements inside

<svg> — Basics

Ques: What does SVG stand for?

Ans: SVG stands for Scalable Vector Graphics

Ques: What is the <svg> element used for?

Ans: To create vector-based graphics using XML — shapes like circles, lines, and paths.

Example of SVG code:

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>

Common SVG Shapes

Tag	Shape	Example
<rect>	Rectangle	<rect width="100" height="50" fill="red"/>
<circle>	Circle	<circle cx="60" cy="60" r="50" fill="green"/>
<ellipse>	Oval	<ellipse cx="100" cy="50" rx="80" ry="30" fill="yellow"/>
<line>	Straight line	<line x1="0" y1="0" x2="200" y2="200" stroke="black"/>
<polygon>	Multiple-sided shape	<polygon points="50,0 100,100 0,100" fill="purple"/>
<path>	Complex shape	<path d="M10 80 Q 95 10 180 80" stroke="orange" fill="none"/>

Inline vs External SVG

Ques: What’s the difference between inline and external SVG?

Type	Example	Advantage
Inline SVG	<svg>...</svg> directly in HTML	Easy to style with CSS
External SVG	<img src="graphic.svg">	Reusable and cached by browsers

Styling SVG

Ques: Can you style SVG elements with CSS?

Ans: Yes, you can change colors, strokes, or animations with CSS.

Example:

<svg width="100" height="100">
  <circle id="c1" cx="50" cy="50" r="40" fill="red" />
</svg>

<style>
#c1:hover {
  fill: gold;
  stroke: black;
  stroke-width: 3px;
}
</style>

SVG vs Canvas

Feature	<canvas>	<svg>
Type	Raster (bitmap)	Vector
Resolution	Pixel-based (not scalable)	Infinitely scalable
DOM	No DOM elements	Each shape is a DOM element
Performance	Faster for many objects	Slower for many elements
Use Case	Games, animations	Icons, charts, logos
Accessibility	Harder	More semantic and accessible

Ques: Can you use both <canvas> and <svg> in one project?

Ans: Yes, it’s common to use SVG for static graphics and Canvas for interactive or animated parts.

Advanced Features

Ques: Can SVG handle animations without JavaScript?

Ans: Yes, using SVG SMIL animations or CSS animations.

Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="r" from="10" to="40" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>