Question

Here is my html:

<canvas id="test" width="400" height="200"></canvas>

here is my javascript:

var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");
canvas_context.fillRect(50, 25, 150, 100);

I am just experimenting with this and none of the tutorials seem to be working. I am using chrome as my browser fyi.

The original typo was only on here; not in my editor. Sorry about that.

I am getting the error: Uncaught TypeError: Cannot call method ‘getContext’ of null even with the jsfiddle example.

Ok I figured out what was wrong. Because my javascript was in the head of the html file, it was being loaded before the DOM was completely loaded, So when it tried to do var canvas_one = document.getElementById("test"); it set canvas_one to null. So what I did is just wrap it in jquery like this:

$(document).ready(function(){
var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");

canvas_context.fillStyle = "rgb(255,0,0)";
canvas_context.fillRect(10, 25, 150, 100);

});

Now it waits for the DOM to load before it reads the javascript and everything works.

Answer 1

Make sure any code which references the DOM executes only after the DOM is ready. This can be achieved by wrapping everything in a function which is called using window.onload, or by using jQuery or a similar library to do this for you.