Drawing Basic Shapes with HTML5 Canvas (Part 3)

Hello readers! Welcome to the third part of "Drawing basic shapes with HTML5 Canvas" If you haven't, please read the first part here and the second part here. They cover fundamental knowledge that is necessary to understand this part. For this installment, we'll draw a triangle. Let's do it!

Triangle:


Here is the code, please look over it first to see if you can understand it by yourself.  Then, you can read on to the explanation:

<html>
  <body>


    <canvas id="myCanvas" width="200" height="100" style="border: 1px solid black;">
      Your browser does not support the canvas element.
    </canvas>


    <script type = "text/javascript">
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.moveTo(10, 10);
      context.lineTo(150, 50);
      context.lineTo(10, 50);
      context.lineTo(10, 10);
      context.stroke();
      context.fill();
    </scrip>


  </body>
</html>

I didn't include header or doctype declaration for the sake of simplicity. So, we'll just focus on the code between the <canvas> tags and the JavaScript code.


<canvas> tags: nothing new here if you read the second part of this tutorial. We create a canvas with specified dimension. We also make the canvas' border visible for easy drawing. Our canvas can be identified / referenced using its id.


<scrip> tags: this is the JavaScript used to draw shapes on the canvas. Recall that canvas is just an drawable area and it can't draw itself. That's why we need to use JavaScript to do the drawing.

1. Get a reference to our canvas using its id
2. Get the 2D drawing context of our canvas. Please look at part 2 for explanation of what a canvas context is.
3. To draw custom shapes such as a triangle, we can't use convenient methods like fillRect(). Therefore, we must draw those shapes ourselves. The process is like this: specify the starting point --> sketch the drawing by using lineTo() --> draw the shapes by calling stroke(). This process is analogous to drawing with pencil and paper. We first choose a starting point for your pencil stroke and from there you drag the pencil to draw things that we want. Moreover, professional artists don't just start drawing with paint immediately. They sketch first with pencil and then draw with paint according to the sketch. 

moveTo(x, y) moves our pencil to point (x , y).
lineTo(x, y) draws a line with pencil from your previous point to the new point specified inside lineTo(x,  y).
stroke() is called when when we're done with pencil sketching.
fill() is called if we want to fill the shape we just create with color.


That's it for now. Stay tuned for the last part where we're gonna draw a circle :)

Drawing Basic Shapes with HTML5 Canvas (Part 2)

Hello and welcome to the second part of "Drawing Basic Shapes with HTML5" series. If you haven't looked at the first part, you can read it here. The first part covers the basics about the coordinate system that  HTML5 Canvas uses. In this second part, we will apply that knowledge into drawing a simple rectangle in HTML5 Canvas.

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>

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 :)