HTML5 <canvas> element has given web developers ability to render graphics on page using javascript. It gives ability to render images,render texts, show simple or very complex animations and a lot more which was earlier done through flash code. This tutorial has been designed for the beginners who are willing to start their web development experience in HTML5, it will help to learn the very useful uses of HTML5 canvas element.
Let us see a basic example of canvas to display Hello World! on page
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas{
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '30px Arial';
context.fillStyle = 'green';
context.fillText('Hello World!', 100, 100);
</script>
</body>
</html>
The above code will produce the following result
To use a canvas element we need to place a <canvas> somewhere in the HTML page. Then this element can be accessed from javascript to create the context of this element. Then context can utilize the HTML 5 canvas API to create visual efects using Canvas. The context created can be of type 2d or webgl (3d).
A canvas element can have only one context at a time. If we try to use the getContext() method again, it will simply return the reference to the previously created context object.
Browse Plugins
Submitted Plugins
Tutorials
Sponsored Links
