The idea behind this project came from Lode's Computer Graphics Tutorial website. I have no idea how I ever came across this website. I was obviously looking at something about computer graphics. One of the links on the page is for Sierpinski Fractals.
I ran into a small problem when drawing the lines. They kept coming out fat. I knew it had something to do with canvas but I couldn't figure it out. I almost gave up on it but then I came across this article: Resizing the HTML Canvas Element. And here is the paragraph that cleared everything up:
Because at the time I wasn't specifying the canvas width and height attributes inside the canvas HTML tag I was grabbing the default values which are: canvas.width = 300 and canvas.height = 150.
When you specify the size of the canvas's width and height attributes, you are specifying the size of the canvas's rendered area. When the size is specified via CSS, you scale the rendered area to match the defined CSS size. It is this discrepancy that results in the skewing that you see on your canvas.
It is mistakes like this that drive me crazy but once I find out what is causing the problem (which is usually my lack of complete understanding of the subject I am working on) I usually don't make them again. It is for these reasons that actual programming will always trump just reading a book on how-to program.