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.
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…
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.
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.