How to use HTML 5 Canvas-Graphics Element
What is Canvas?
The HTML5 canvas element can be used to draw graphics
on the webpage via JavaScript. The canvas was originally introduced by Apple
for the Mac OS dashboard widgets and to power graphics in the Safari web
browser. Later it was adopted by the Firefox, Google Chrome and Opera. Now the
canvas is a part of the new HTML5 specification for next generation web
technologies.
By default the <canvas> element has 300px of width and 150px of height without any border and content. However, custom width and height can be defined using the CSS height and width property whereas the border can be applied using the CSS border property.
The
anonymous function attached to the window.onload event will
execute when the page load. Once the page is loaded, we can access the canvas
element with document.getElementById() method. Later we have
defined a 2D canvas context by passing 2d into the getContext() method
of the canvas object.
Drawing
a Line
The most basic path you can draw on canvas is a
straight line. The most essential methods used for this purpose are moveTo(), lineTo() and
the stroke().
The moveTo() method defines the
position of drawing cursor onto the canvas, whereas the lineTo() method
used to define the coordinates of the line's end point, and finally the stroke() method
is used to make the line visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing a Line on the
Canvas</title>
<style>
canvas
{
border:
1px solid #000;
}
</style>
<script>
window.onload = function() {
var
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Drawing
a Arc
You can create arcs using the arc() method.
The syntax of this method is as follow:
context.arc(centerX, centerY, radius, startingAngle,
endingAngle, counterclockwise);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing an Arc on the Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>
Drawing
a Rectangle
You can create rectangle and square shapes using
the rect() method. This method requires four parameters x, y position
of the rectangle and its width and height.
contex(x, y, wit.rectdth, height);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing a Rectangle on the
Canvas</title>
<style>
canvas
{
border:
1px solid #000;
}
</style>
<script>
window.onload = function() {
var
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Drawing a Circle
There is no specific method for creating circle
like rectangle's rect() method. However, you can create a fully
enclosed arc such as circle using the arc() method.
The syntax for drawing a complete circle using
the arc() method
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing a Circle on the
Canvas</title>
<style>
canvas
{
border:
1px solid #000;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300"
height="200"></canvas>
</body>
</html>
Comments
Post a Comment