InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Explain with examples <canvas> tag. |
|
Answer» <CANVAS> tag HELPS the user to draw anything in the canvas area. It is generally used in creating graphics or animation in the page. Game graphics and other visual images can be created using the tag canvas>. Inside the <canvas> tag we can also specify the height and width attributes. Below is an example for creating two simple overlapping squares of different colors. We create a <canvas> tag in our HTML, then the rest of coding is in the JavaScript. Here, first, we take the id then we tell the browser it's a 2d canvas by canvas.getContext('2d'). Then we convey the COLOUR by fillStyle and the dimensions of the rectangle by fillRect(10, 10, 100, 100), which means it will start at position 10,10 and width and height of 100. <!DOCTYPE html> <html> <head> <title>Canvas Demo</title> <style> .grid__iframe { display: grid; place-content: CENTER; } </style> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //square 1 ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); //square 2 ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(50, 50, 100, 100); } </script> </head> <body> <div class="grid__iframe"> <canvas id="canvas" width="300" height="300"> This canvas shows two overlapping squares. </canvas> </div> </body> </html>The topic of the canvas is very large and we can create some complex shapes and also render animation on the web-page. |
|