I recently set out to create a game of snake in Javascript using the canvas element; however, I quickly realized how much I had to learn. Until I started the project, I never touched canvas, nor have I implemented the logic required for a game of snake. The two aspects combined were a little more than I could reasonably accomplish in a day. I decided to start with a seemingly simple task - move a square around a canvas element, but even that proved to be a challenge.
Luckily, great sites like Stack Overflow exist, and I was able to resolve my major problem. The issue I had was that the fairly basic command of context.clearRect(0,0,canvas.width,canvas.height); was not working as expected. I managed to find an answer which revealed that one needs to include context.beginPath(); in order to create shapes that are deleted when the clear command is issued. Armed with this piece of knowledge, I merely had to implement a listener to identify key press codes, and the rest of my code worked like a charm.
The code can be found over at jsfiddle here.