1) What is Canvas in HTML 5?
It let us create graphics on the web page with the help of client-side scripting.
2) How does canvas look like by default?
Canvas (by default) results in a rectangular container with no border and no content.
3) What should we do if we want to specify border for canvas?
We can use css style tag as follows,
<html>
<head>
</head>
<body>
<canvas id=”foo” style=”border: solid white 1px”>
</canvas>
</body>
</html>
4) In order to draw graphics what is the basic thing which is required?
We need to get the reference for canvas object in JavaScript and for that, we will use “id” of canvas and “document.getElementById” method of javascript.
var canvas = document.getElementById(‘foo’);
5) How to make sure Canvas is supported in the browser using javascript?
We use getContext of canvas object.
if(canvas.getContext)
{
//Supported
}else{
// Not Supported
}
6) How to work with rectangles inside canvas?
We have three methods for that fillRect, strokeRect and clearRect.
7) What is the difference between fillRect and strokeRect?
Explanation: fillRect let us draw a filled rectangle.
strokeRect let us draw a rectangle with only outline.
Parameters –
- X-coordinate
- Y-coordinate
- Width
- Height
Example:
<html>
<head>
<script>
function drawShape()
{
var canvas = document.getElementById(‘foo’);
if(canvas.getContext){
varctx = canvas.getContext(‘2d’);
ctx.strokeRect(0,0,50,50);
ctx.fillRect(100,100,50,50);
}
}
</script>
</head>
</html>
Output:
8) What does clearRect function?
It clears the specified area and makes it fully transparent.
10) What else we can do other than rectangle in canvas?
It supports many shapes like line, circle, different kind curved shapes such as Bezier and quadratic curves. Canvas lets us work with a wide range of formatting options like text formatting, gradients etc.
