HTML5 Canvas, HTML5 Canvas Tutorial, HTML5 Canvas Tutorial step by step, canvas basic , canvas example to draw circle, canvas example to draw line, canvas example to draw rectangle,fill canvas example
The canvas element is an element defined in HTML5 code using width and height attributes
It allows bitmap (2D) drawing which is controlled using JavaScript
The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
Browser support Following latest Browser
To Learn Canvas you Must Know JavaScript
How to find wether your browser support convas or Not :
Execute following code if message display
your browser doesn't support canvas!
Code :
<canvas
id="myCanvas" width="500" height="300">
your browser doesn't support canvas!
</canvas>
Canvas Tag :
we are going to defined canvas tag as follows (it is paired tag)
<canvas id="mycanvas" height="500px" width="500px">
</canvas>
HTML Code SAVE as Basic.html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
in this code we are going to use three attributes of canvas that is id, height and width .
if you execute this code using browser it display nothing .it is because canvas tag provide only container or area to draw graphics .
What is canvas Element :
it is a tag which provide a area to draw 2D graphics .
Remember To Draw graphics on canvas it should be accessible to access it give unique id to it as shown in code i have used <canvas id="myCanvas " >
By using this id using javascript you can draw graphics on the canvas
To identify Canvas element you can use CSS or style tag property such as border, background-color
Code
<!DOCTYPE html>
<html>
<head>
<style>
#myCanvas{
border:2px solid black;
background-color:pink;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" >
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
Output:
you can also use external CSS to control Style of your canvas Element .
Lets we take
Basic canvas example to draw circle with explanation of each step .
i am using same HTML and css previous code just i need 500px height and width as well as i am going to use JavaScript code to draw circle shown below in code.
<!DOCTYPE html>
<html>
<head>
<style>
#myCanvas{
border:2px solid black;
background-color:pink;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Output:
Lets Understand JavaScript code step by step
code is
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.arc(100,70,50,0,2*Math.PI);
ctx.stroke();
</script>
______________________________
1. var c=document.getElementById("myCanvas");
to understand this line lets see our tag
<canvas id="myCanvas" width="500" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
Your browser does not support the HTML5 canvas tag.
</canvas>