Before going into more details, I want to warn you that not all browsers support HTML5. And each browser supports HTML5 differently. The reason is that HTML5 is not finalized yet, so some browsers decide to support certain tags while the others don't. Fortunately, HTML5 Canvas is supported by most major browsers. If you are using the updated version of Firefox, Chrome, Safari or Opera, you are golden for this tutorial. But if you're using IE8 or earlier, change your browser now!!
Rectangle:
Take a look at the code first and I'll explain it line by line:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="150" height="75" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,100,50);
</script>
</body>
</html>
<html>
<body>
<canvas id="myCanvas" width="150" height="75" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,100,50);
</script>
</body>
</html>
1. HTML5 Doctype declaration: you can see how much it is different from that of HTML4. It's much simpler and easier to remember! Just that one line will trigger the standard mode in HTML5-supporting browsers.
2. <canvas> tags: these tags let browsers know that we want to insert a canvas into our web page.
- id: like the canvas' name. JavaScript uses it to identify one canvas from another
- width and height: specify how big the canvas is. Remember that a canvas is just a drawable area on your page. Its shape is always a rectangle. You draw things inside that rectangle.
- style: I use it to show the invisible rectangle that defines the canvas. Without the visible border, it's hard to know where our drawable area is. We make it visible for now and make it disappear later after finishing our drawing.
- text inside <canvas> tags: we put some text inside the tags, so that if a browser doesn't support HTML5, the text will be displayed, letting users know what's wrong. This is called graceful degradation :)
3. <script> tags: next we have a JavaScript code which is used to draw things on the canvas. Why we need JavaScript? Well, remember that the canvas is only a drawable area. It is not responsible for any drawing. Therefore, we must use other technologies to draw on it. In this case, we use JavaScript because it is easy and popular scripting language for the web.
- First, we get a reference to our canvas using the canvas' id
- Second, we get a reference to our canvas drawing context which is in 2D. A drawing context is like a set of properties that our drawing has. For example, color and dimension are properties of a drawing.
- Third, we set the fillStyle property to red color. This means that our rectangle will be a solid rectangle.
- Fourth, we define the drawing dimension property of our rectangle. Our rectangle will be drawn from the origin of the canvas which is point (0, 0) on the coordinate system. Moreover, the rectangle's width is 100 pixels and its height is 50 pixels. Confused? Take a look at this picture and maybe re-read the first part of this series :P
Copy and paste that entire code into a text editor such as WordPad, Text or Gedit (remember to use plain-text mode) and save it as a .html file and open it with your browser to see the result for yourself.
In the next part, we'll use different techniques to draw the remaining shapes: triangle and circle. As always, please leave a comment below and let me know what you think :)
No comments:
Post a Comment