HTML5 and 3rd Grade Math

Article
01/27/2011

I have a 3rd grader at home, and he’s learning multiplication. Struggling with memorizing these currently unimportant numbers (in his mind), we’re doing some extra things at home. As an example, I’ve been making him write out an old fashioned multiplication table, in order to get him to start recognizing certain numbers (and it helps with his addition too). He’s been hand drawing these tables, which are not coming out as straight as they need. So, I’ve enlisted the help of the HTML5’s Canvas tag, and wanted to get something like the following diagram (which is what my code produced).

To start, you need a proper, valid HTML5 page. Since I’m on a HTML5 learning curve, I’m looking at lots of samples, papers, and related books. And I see a lot of samples that do not properly identify the HTML page as HTML5. Lots of guidance is given about this, but for now I’ll point out the following:

understand the purpose of lines 1, 2, and 5. W3C talks about these here.
If you ever want official validation of your HTML5 (or of others), check out the W3C Markup Validation Service
I’ve created a template in VS2010 that gives me a HTML5 starter.
A nice backgrounder exists here from Dive Into HTML5, which also has a corresponding book.

    1: <!DOCTYPE html>
    2: <html lang="en">
    3: <head>
    4:     <title></title>
    5:     <meta charset="utf-8">
    6: </head>
    7: <body>
    8: </body>
    9: </html>

Next, we need to put a Canvas element on the page. This will be our drawing surface. We’ll also draw the page at startup, via the onload event. I haven’t looked up what the official canvas size should be, so I’m just putting something down that I can work with. But, The Killers canvas size is 1092x686, and that is one sweet, rich canvas experience.

    1: <body onload="init();">
    2:     <canvas id="c1" width="1000" height="1000" />
    3: </body>

Now that we have a drawing surface, let’s draw. To do basic lines, it’s really straightforward. I use a series of moveTo and lineTo to indicate where I want my lines (that create the rows and columns). Finally, to make the actual lines, stroke is called.

    1: //draw vertical lines
    2: for (var x = 0.5; x < 500; x += 50) {
    3:     context.moveTo(x, 0);
    4:     context.lineTo(x, 450);
    5: }
    6:  
    7: //draw horizontal lines
    8: for (var y = 0.5; y < 500; y += 50) {
    9:     context.moveTo(0, y);
   10:     context.lineTo(450, y);
   11: }
   12:  
   13: //officially draw the lines
   14: context.strokeStyle = "#eee";
   15: context.stroke();

The final part is printing the numbers / legends, leveraging fillText.

    1: //set the font for the labels
    2: context.font = "bold 48px sans-serif";
    3:  
    4: //horizontal labels
    5: for (var i = 1; i < 10; i += 1) {
    6:     context.fillText(String(i), 12 + ( (i-1)*50), 43);
    7: }
    8:  
    9: //vertical labels
   10: for (var i = 2; i < 10; i += 1) {
   11:     context.fillText(String(i), 12, 43 + ((i - 1) * 50));
   12: }

That’s it. Very basic sample, but something that I can use. It even works in other browsers, although I bet IE9 gets it done faster.

HTML5 and 3rd Grade Math

Additional resources