| Free tutorials for Java, Eclipse and Web programming |
HTML5 introduces the <canvas> </canvas> element which is a black element on which you can draw in real time via JavaScript. Canvas has the advantages that as it is part of the HTML specification all browser will support it directly without the need to install a plugin. Currently canvas only supports 2D rendering but 3D rendering is planned for the future.
Create for example the following page which draws on the canvas a rectangle.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<script>
window.onload = function () {
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(100,200,200)";
ctx.fillRect (10, 10, 80, 80);
}
}
</script>
<style>
</style>
</head>
<body>
<canvas id="mycanvas" width="600" height="600">
Your browser doesn't support canvas
</canvas>
</body>
</html>
</html>