This is a series of lessons to learn the basics of javascript and how to draw in the browser. In this first lesson, we are going to draw some simple lines to create a basic "curve stitch" in an html canvas. (You can see a demo of a simple curve stitch being drawn here). The canvas is sized to be 500x500 pixels, and the spaces on the axis for the curve stitch are separated by 100px (so we have just 5 lines).
The code has lots of comments to help you understand what is going on. If you don't understand something in the code then GOOGLE it! (Half of all programming is just "looking it up on Google", be glad that you are learning code in the age of search engines.)
And don't worry if you don't understand all of the little details. The most important concepts to grasp here are the programming patterns themselves (variables, loops and functions), NOT the detailed commands of javascript.