This came to me as a surprise, when we were doing the last tutorial. If you see the code in detail, we have the code below.

The above code is not on the head section of the HTML document! Rather it came after everything in the HTML document. I hope its for the Canvas does not get initialised before the code is executed. But moving the script to the last section of HTML document, it worked just fine.
I hope someone have got better explanation about the effect, but thought its better to share as this very thing took me a while to get it working. After all I am also learning now and sharing my experience at the same time.
The next thing to keep an eye is the code below on javascript

var canvas_one=document.getElementById('board_one');

The above code is pure javascript without utilising jQuery library. But the same thing can be achieved by the code below

var canvas_one=$('#board_one')[0];

The thing which went wrong for me in the beginning is that I was doing

var canvas_one=$('#board_one');

First I was hoping this should work, but it did not unless I access the zeroth element. Hopefully this also can be explained by some experienced developer, but then as we are going ahead in our learning its better to know how to get the element using jQuery library and its by accessing the zeroth element as below.

var canvas_one=$('#board_one')[0];

Hope that helps someone.