What is Canvas?
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element. By default, the <canvas> element has
no border and no content.
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
The <canvas> element is used to draw graphics, on the fly, on a web page.
STEPS TO USE CANVAS
1 Create a Canvas
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
<canvas id="myCanvas" width="200" height="100"></canvas>
2 To add a border, use the style attribute:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
3 Draw Onto The Canvas With JavaScript
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Example explained:
First, find the <canvas> element:
var c=document.getElementById("myCanvas");
Then, call its getContext() method (you must pass the string "2d" to the getContext() method):
var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text,
images, and more.
The next two lines draw a red rectangle:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.
.png)
