Quick JavaScript Interview Questions (2015)

Chapter 8. Questions on Canvas API

Q. What is a canvas in HTML5?
ANSWER
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?
ANSWER
Difference between Canvas and SVG (Scalable Vector Graphics) are listed in below table.

CANVAS SVG

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

ii. A diagram drawn in ii. canvas is resolution
dependent.

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
independent.

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.

capabilities

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

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?
ANSWER’
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.

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

</script>
</body>

</html>
The following screenshot shows the constructor function of the context object which is CanvasRenderingContext2D native object.

Q. How to load an image in Canvas?
ANSWER
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.

<html>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"),
img = new Image();
img.src =
"http://www.gravatar.com/avatar/4205261332ff131e971b48db
31dcb528.png";
img.onload = function() {
context.drawImage(img, 10, 10);
};
</script>
</body>
</html>
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?
ANSWER
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.