S2JS - Introduction to drawing on the canvas : Obtaining a drawing context

If you look at the code below, the first line of the script is:

var ctx = myCanvas.getContext("2d");

This creates a variable (same idea as a Scratch variable) called "ctx" which is a "drawing context to the canvas" -- effectively the doorway that lets us manipulate the visible canvas.

"ctx" is just a name I've made up, but you'll find it's very common for programmers to call their drawing contexts "ctx" and it's good for us to do the same.

The name "myCanvas" was also something I made up, but it's vital to use the same name in both places, otherwise the linkage between the HTML-world and the Javascript-world will get lost.

<canvas id=myCanvas width=300 ... : : var ctx = myCanvas.getContext("2d");

Don't worry about remembering this stuff. Nobody remembers the details. We all copy and paste it when we need it.

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink"> </canvas> <script> var ctx = myCanvas.getContext("2d"); ctx.fillRect(10, 10, 20, 20); </script> </body> </html>