HTML and CSS Reference
In-Depth Information
The only browser that currently does not support CANVAS is
Microsoft's Internet Explorer. You can, however, add CANVAS sup-
port to Internet Explorer through a plug-in called ExplorerCanvas,
which can be downloaded at
http://excanvas.sourceforge.net/
.
At the end of the end day, SVG is a good solution, whereas
CANVAS is an exciting emerging solution. A lot of technology
from Google, Apple, Opera, and Mozilla is being invested into
expanding the functionality of CANVAS.
Starting with the Basics
There are two parts you need to create a visual element using
CANVAS. The first is the CANVAS element itself used in your
HTML. In many ways, the CANVAS element is very much the
same as any other element used in HTML. Here is an example:
<canvas id=”myCanvas” width=”640” height=”480”>
</canvas>
The tag uses the new HTML5 element CANVAS as the open-
ing and closing tag. The
width
and
height
attributes specify the
size of the CANVAS space on the screen. It is the ID that is impor-
tant. Here the ID is named
“myCanvas”
.
Using JavaScript, you can now program the illustration that will
appear in the CANVAS tag. The following example creates a black,
outlined square that appears in your web page using JavaScript
and Canvas.
<html>
<head>
<title>Basic Canvas Drawing</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById
('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type=”text/css”>
canvas { border: 1px solid black; }
</style>
</head>
<body onload=”draw();”>
<canvas id=”myCanvas” width=”150”
height=”150”></canvas>
</body>
</html>
