HTML5 Canvas
HTML5 introduced new canvas element to draw 2D graphics by scripting. It is a rectangular area on web page. <canvas> is not supported in older version browsers but supported in recent versions
of the browsers. To set-up 2D context <canvas id="canvas" height="300" width="300"> </canvas> has to be included. width and height are the only two attributes which specifies the canvas width and height. Initially canvas will be 300px wide and 150px in height.
<canvas> has a method called getContext() to render the context and functions.getContext() has one parameter which specifies the type of the context.
var canvas = document.getElementById('canvas'); - by calling getElementById it retrieves the node representing canvas.
var c = canvas.getContext('2D'); - to render the context and functions.
<canvas> supports only one primitive shape that is rectangle. Below are the functions to draw rectangle.
fillRect(x,y,width,height) - It draws a rectangle.
strokeRect(x,y,width,height) - It draws a outline for the rectangle.
clearrect(x,y,width,height) - It makes the area transparent and clears the rectangular area.
All other shapes other than rectangle can be created by combining one or more paths. Below are the functions.
beginPath() - It creates a new path
closepath() - It closes the path which was created before.
stoke() - It is used to draw the shape by its outline.
fill() - It draws the solid shape.
lineTo(x,y) - It draws a line as specified by x and y.
movesTo(x, y) - It moves to particular co-ordinates as specified by x and y.
Below is the sample code to create canvas.
Output of the above code is
ZenRays provide the following to make you expert
zenrays providing html5 training in Bangalore in Bangalore
Fully practical and project-based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience
If you want more details please visit us:
Zenrays.com Reach us at trainings@zenrays.com
<canvas> has a method called getContext() to render the context and functions.getContext() has one parameter which specifies the type of the context.
var canvas = document.getElementById('canvas'); - by calling getElementById it retrieves the node representing canvas.
var c = canvas.getContext('2D'); - to render the context and functions.
<canvas> supports only one primitive shape that is rectangle. Below are the functions to draw rectangle.
fillRect(x,y,width,height) - It draws a rectangle.
strokeRect(x,y,width,height) - It draws a outline for the rectangle.
clearrect(x,y,width,height) - It makes the area transparent and clears the rectangular area.
All other shapes other than rectangle can be created by combining one or more paths. Below are the functions.
beginPath() - It creates a new path
closepath() - It closes the path which was created before.
stoke() - It is used to draw the shape by its outline.
fill() - It draws the solid shape.
lineTo(x,y) - It draws a line as specified by x and y.
movesTo(x, y) - It moves to particular co-ordinates as specified by x and y.
Below is the sample code to create canvas.
<!doctype html>
<html>
<head>
<title>Canvas</title>
<style>
#canvas{
border: 3px solid green;
}
</style>
</head>
<body>
<canvas width='1000' height='1000' id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.fillStyle = 'red';
c.beginPath();
c.moveTo(50,500);
c.fillRect(50,50,800,500);
c.fill();
c.lineWidth=2;
c.strokeStyle="red";
c.stroke();
</script>
</body>
</html>
ZenRays provide the following to make you expert
zenrays providing html5 training in Bangalore in Bangalore
Fully practical and project-based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience
If you want more details please visit us:
Zenrays.com Reach us at trainings@zenrays.com
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 comments:
Post a Comment