HTML Interview Questions and Answers on Canvas

HTML interview questions, HTML questions for practice, html coding questions, HTML canvas examples, interview question html, interview question of HTML, interview question html css, interview question on html, html interview question and answer, top html interview question

What is Context in Canvas?

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

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

What is the difference between the lineTo and moveTo methods?

moveTo method of Canvas API defines starting point from where we have to start drawing.
lineTo method of Canvas API defines the ending point till the line is 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 methods are required to draw a simple line?

moveTo, lineTo & stroke methods are required to draw the 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 endpoint (cap) of the 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 the attribute as ‘miter‘ only;

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

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

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

strokeRect() method directly draws 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 the 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 the 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 rectangles.

What is the 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 the ending points.
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 the 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 the current point to the first starting point. We can clearly see the use of this method to draw a triangle. We draw only two lines and then
call closePath method to create a third line or to close the path.

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

What is the difference between arc() and arcTo() methods?

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 that exists in the path()?

We use isPointInPath() method to check coordinate exists or not in the 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 are shadowColor and shadowBlur properties?

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

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

How can we create a dashed 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 the length and the second value is a gap. It will repeat the same as 5 15 5 15 5 15…. till the end point of the line.

How can we add a click listener on the 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
HTML interview questions, HTML questions for practice, html coding questions, HTML canvas examples, interview question html, interview question of HTML, interview question html css, interview question on html, html interview question and answer, top html interview question

JS Mount

Learn More