Jumping Into Javascript

A few weeks ago I decided to post my first question to stackoverflow

How does a self-taught programmer know when he’s ready to look for a job?

The responses I got were very encouraging, but one in particular pointed out some shortcomings in my education. To paraphrase, it instructed me to look around at job offerings and compare the skill set employer’s are looking for to my own. This was a bit disheartening to me as I’ve been focusing mainly on theory and AI and found that my skills are not all that marketable in an environment that is dominated by web and database programming.

This endeavor is an attempt to remedy that problem, or at least demonstrate to future employers and myself, that I can pick up these technologies relatively quickly. When I learn a new technology/language/framework I usually prefer to start with a project that can be done simply but can also scale up, rather than simply following along with a tutorial or book.

For this purpose I will be writing a Javascript version of pyTrade, which will not be a port, but a complete rewrite to allow me to understand the language better. It wasn’t too long ago that I wrote pyTrade, so a lot of it is still fresh in my mind, however it’s been long enough that at least some of the details escape me and I will do my best not to look at the source code.

I’ll be writing this in tutorial fashion to help reinforce the concepts that I’ll be learning and to let others follow along if they wish. This will not be a beginner’s introduction to Javascript. I’m assuming that the reader is intimately familiar with at least one Algol inspired language. My background is mainly Python and Scheme with a little C, so you may see Javascript idioms compared against their counterparts in these languages.

Since I don’t want to constantly refer to this project as “this project”, for now it will be codenamed JamochaTrade. Maybe I just didn’t think hard enough, but I couldn’t come up with a short prefix that didn’t make it sound like this was implemented in Java. Not that JamochaTrade satisfies that criteria, but I like it as a codename.


First Step to JamochaTrade

As I said earlier, I’m going to start out with the simplest thing I can and work up from there. The simplest thing I can think of to start with is the html shell page that will allow people to access JamochaTrade. Without further ado here’s the shell…


  <title>JamochaTrade - A Javascript stock charting program.</title>
    body {text-align: center;}
    canvas {border: 1px solid #000;}
  <canvas id="chart"></canvas>
  <script src="chart.js"></script>

I’ve saved this code in a file named “index.html” and also created a blank file named “chart.js” where the Javascript will eventually reside. This code doesn’t do much and I think it’s relatively self-explanatory so I won’t go over it, except to say the important part of this shell is that we create a canvas and give it the id of chart.

Now that we have a canvas, my first goal is to draw something on it. Since my preferred charting style is the candlestick chart, I’ll start by figuring out how to draw a box on the canvas. To do this we need to do 3 things in our chart.js file, first we need to get the reference to the canvas from the dom, then we need to get the context from the canvas and finally we need to draw a box.

What is a context? The simplest way to think about a context is as an API. A context provides methods of drawing on the canvas, different contexts provide different methods of drawing. That’s the best explanation I have at the moment, I’ll probably explain it more throughly later.

Currently there is only one universally supported context for the canvas, which is the “2d” context. At some point in the future there will also be a “3d” context that will allow 3d graphics to be displayed in the browser. Since that only exists in a few vendor-specific instances right now I’ll ignore that from here on out.


var chart = document.getElementById("chart");
var c = chart.getContext("2d");
c.fillRect(10, 25, 20, 50);

The first line above simply gets the chart object from the dom tree. The second line sets the chart’s 2d context to the variable c. I chose c because it is short and we will be using it in many of our drawing calls, also it can be thought of as short for context, canvas and chart which works out pretty well if I do say so myself.

Finally we draw our first object onto the canvas. The fillRect procedure is used to do the actual drawing. There’s two common way’s I’ve come across drawing rectangles in GUI programs, the first is to specify the x and y starting point of one corner of the rectangle and the x and y point of the opposite side (Left/Top/Right/Bottom). The other way, and the way the 2d context in Javascript works, is to specify the x and y starting position and then the length of the rectangle along the x axis and the y axis (X/Y/Width/Height).

The easiest way to test which coordinate system is being used is to give large numbers for the first 2 parameters and small negative numbers for the next 2 parameters, like (100, 100, -10, -10). If the resulting rectangle fills the entire top left corner you are using the (Left/Top/Right/Bottom) coordinate system, if the rectangle is small and off of the edge you are using the (X/Y/Width/Height) coordinate system.

With that lengthy discussion out of the way the first Jumping Into Javascript post has reached its conclusion. The next post will cover moving the rectangle as well as a brief overview of arrays.

GOTO – Part 2 – Moving Objects on the Canvas

Get JamochaTrade on GitHub



WhatWG Canvas Standard/Reference

Dive Into HTML5 – Canvas

Michal Budzynski: Simple game with HTML5 Canvas Tutorial

A stackoverflow discussion of coordinate systems.