Questions on Canvas API - Quick JavaScript Interview Questions (2015)

Quick JavaScript Interview Questions (2015)

Chapter 8. Questions on Canvas API

Q. What is a canvas in HTML5?
Canvas is a new element in HTML5 for drawing graphics. A graphics can be drawn on canvas by following below steps.

Define the canvas area.
Get the drawing context.
Using the context start the drawing.

Q. What is the difference between Canvas and SVG?
Difference between Canvas and SVG (Scalable Vector Graphics) are listed in below table.


i. A diagram can be drawn i. using a context in

ii. A diagram drawn in ii. canvas is resolution

iii. A diagram drawn in iii. Canvas can be saved to
PNG or JPG format.

iv. Diagram drawn in Canvas iv. is pixel based. No DOM
elements are involved.

v. Rendering game v. graphics, such as sprites and backgrounds can be created.
A diagram is drawn using XML like SVG element.

A diagram drawn in SVG is resolution

SVG diagrams cannot be saved to PNG or JPG format.

Diagram drawn in SVG is DOM element based. No pixels are involved in the diagram.
Highly interactive
animated user interfaces can be created.
vi. Poor text rendering vi.


vii. Poor SEO and vii. Accessibility as
everything pixel based
and content are not

viii. Modified through script viii. only.

ix. Performance is better ix. with smaller surface, a
larger number of objects (>10k), or both.
Good text rendering capabilities

Better SEO and
Accessibility as it DOM based rendering.

Modified through script and CSS.

Performance is better with smaller number of objects (<10k), a larger surface, or both.

Q. What is canvas 2d context and how it is created?
Using getContext() method with parameter '2d' a canvas context can be created.
This context method is a type of CanvasRenderingContext2D object. Below code shows a simple 2d context creation and log the object’s constructor.

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d");


The following screenshot shows the constructor function of the context object which is CanvasRenderingContext2D native object.

Q. How to load an image in Canvas?
An image can be loaded using drawImage() method. This method takes several inputs for drawing an image. These parameters are positioning and clipping type. We will discuss these parameters in separate question. Below code shows how to use the drawImage() method to load a PNG image from a URL inside the canvas.

<canvas id="myCanvas"></canvas>
var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"),
img = new Image();
img.src =
img.onload = function() {
context.drawImage(img, 10, 10);
Below screenshot shows the Gravatar image getting drawn inside the HTML5 canvas element. This drawing is done using 2d context.

Q. what are the different overloaded signature for drawImage() method?
The drawImage() method has 3 different signature and listed below.

drawImage(img, x, y) :This method position the image on the canvas at <x, y> coordinates.
drawImage(img, x, y, width, height) : This method position the image on the canvas at <x, y> coordinates with a specified height.

drawImage(img, sx, sy, swidth, sheight, x, y, width, height) : This method clipped the image with starting point <sx, sy> having height sheight and width swidth and position it at <x, y> coordinates with a specified height and width.