Canvas Interview Questions and Answer

What is Context in Canvas?

Canvas in a HTML 5 element that is used to draw graphics and different types of shapes by using JavaScript. Context is the reference or object
of Canvas element that provides methods and properties for drawing on the canvas.
We use getContext() method to get context of canvas.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.canvas // HTMLCanvasElement

What is difference between lineTo and moveTo method?

moveTo method of Canvas API defines starting point from where we have to start drawing.
lineTo method of Canvas API defines ending point till the line drawn.

var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.beginPath();
 ctx.moveTo(10, 10);  // starting point 
 ctx.lineTo(100, 110); // ending point
 ctx.stroke();

What all method are required to draw a simple line?

moveTo, lineTo & stroke method are required to draw line.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();

What is lineCap and miterLimit?

lineCap property set a style at the end point (cap) of line. It has three properties:
butt — Default. A flat edge
round — A rounded end.
square — A square end.

The miterLimit property sets or returns the maximum miter length.
The miter length is the distance between the inner corner and the outer corner where two lines meet. It works If we set lineJoin attribute as ‘miter‘ only;

What is difference between rect() method and strokeRect() method?

rect() method is used to create a rectangle. With rect() method you have to use stroke() or fill() method to actual draw a rectangle.

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.rect(20, 20, 150, 100);
 ctx.stroke();

strokeRect() method directly draw a rectangle without calling stroke or fill method. The default color of the stroke is black.

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.strokeRect(20, 20, 150, 100);

What is difference between fillRect() method and strokeRect() method?

The fillRect() method draws a “filled” rectangle. The default color of the fill is black. We can use fillStyle attribute to set style of this.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

strokeRect() method does not fill color by default. It created outlines only of rectangle.

What is difference between quadraticCurveTo() and bezierCurveTo()?

Syntex: context.quadraticCurveTo(cpx,cpy,x,y);
Syntex: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

quadraticCurveTo method works with one control point. cpx, cpy are control points and x, y are then ending point.
bezierCurveTo method contains two control points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve.

What is beginPath() and closePath() method?

beginPath() method is used to start a new path or reset an existing path. It means if we call beginPath method then we can use new values for properties.

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.beginPath();              
 ctx.lineWidth = "5";
 ctx.strokeStyle = "green";  // Green path
 ctx.moveTo(0, 75);
 ctx.lineTo(250, 75);
 ctx.stroke();  // Draw it

ctx.beginPath(); // create new path, If we remove this
 line then below values effected for both lines.
ctx.strokeStyle = "purple";  // Purple path
ctx.lineWidth = 10;
ctx.moveTo(50, 0);
ctx.lineTo(150, 130);            
ctx.stroke();  // Draw it

closePath() method is used to create a path from current point to first started point. We can clearly see use of this method to draw a triangle. We draw only two lines and then
call closePath method to create third line or to close path.

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();

What is difference between arc() and arcTo() method?

The arc() method creates a circular arc centered at (x, y) with a radius of radius. The path starts at startAngle and ends at endAngle, and travels in the direction given by anticlockwise (defaulting to clockwise).

 context.arc(x,y,r,sAngle,eAngle,counterclockwise);

 x    The x-coordinate of the center of the circle    
 y    The y-coordinate of the center of the circle    
 r    The radius of the circle    
 sAngle    The starting angle
 eAngle    The ending angle
 counterclockwise: Optional.

The arcTo() method creates an arc/curve between two tangents on the canvas.

 context.arcTo(x1,y1,x2,y2,r);

 x1    The x-coordinate of the first tangent   
 y1    The y-coordinate of the first tangent   
 x2    The x-coordinate of the second tangent  
 y2    The y-coordinate of the second tangent  
 r    The radius of the arc

For more info visit https://www.w3schools.com/tags/canvas_arc.asp

How can we get a particular coordinate exists in path()?

We use isPointInPath() method to check coordinate exists or not in given path.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(10, 10, 100, 120);
if (ctx.isPointInPath(20, 50)) {
  ctx.stroke();
};

How we can draw a circle?

To draw a Circle we use arc & stroke method.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

What is shadowColor and shadowBlur properties?

shadowColor property set color of shadow & shadowBlur property is used to create shadow around shape.
The shadowOffsetX property sets horizontal distance of the shadow from the shape.
The shadowOffsetY property sets vertical distance of the shadow from the shape.

ctx.shadowBlur = 20;
ctx.shadowColor = "red";

How can we create dash line?

To create dash lines we use setLineDash() method of Canvas API. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.

// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

ctx.setLineDash([5, 15]); –> here first value is length and second value is gap. It will repeat same as 5 15 5 15 5 15…. till end point of line.

How can we add click listener on canvas element?

The elements (shapes, lines, images) that are drawn have no representation besides the pixels they use and their color.
Therefore, to get a click event on a canvas element (shape), you need to capture click events on the canvas HTML element and use some math to determine which element was clicked.

 document.getElementById('canvasId').addEventListener('click',function(evt){
 alert(evt.clientX + ',' + evt.clientY);
 },false);

JS Mount https://jsmount.com
Canvas Interview Questions and Answer

+1

0