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
- JavaScript Coding Interview Question & Answers
- React Interview Question & Answers – Mastering React
- Top React Interview Question & Answer | React Routing
- Top React Interview Questions and Answers | Must Know
- Interview Question React | Basics for Freshers and Seniors
- Cyber Security Fundamental Questions & Answers You must know
- Application & Web Security Interview Questions & Answers
- Angular Interview Questions & Answers 2021 – Part 3 – JS Mount
- Angular Interview Questions & Answers You should know Part 2
- Top 30 JavaScript Interview Questions and Answers for 2021
- NgRx Top Interview Questions and Answers You should know
- Top 40 Awesome CSS Interview Questions & Answers You should know | CSS Tutorial
- Top JavaScript Commonly asked Algorithms in Interview
- Angular NgModule, AOT, and DI, and EntryComponents with example
- TypeScript New & Latest Features You should know | JS Mount
- Rx JS Top Operators with examples | Rx JS interview questions
- What’s new in Angular 9 | Top updates in Angular 9 By JS mount
- What’s new in Angular 8 | Angular 8 Latest Feature By JS mount
- JavaScript Top Interview questions & Answers You should know
- Top 30 TypeScript Interview Questions & Answers You Must Know
- HR Interview Questions and Answers for Experienced
- Mastering JavaScript Interview Questions & Answers
- Commonly Asked Coding Interview Questions JavaScript
- Angular Interview Question & Answers for Experienced – Part 1
- Most Asked JavaScript Interview Questions for Experienced
- Frequently Asked HTML Interview Questions and Answers
- HTML Interview Questions and Answers on Canvas
- JavaScript Console Interview Questions | Input Output Program
- JavaScript Hoisting Interview Questions | Coding Exercise
- JavaScript ++ Operator | X++ and X = X++ Explanation
One thought on “HTML Interview Questions and Answers on Canvas”