S2JS - Control: functions, loops, if-then-else : Curly vs round

It's very important to understand the difference between parentheses (round brackets) and braces (curly brackets).

{ } Braces provide grouping around a series of statements to show they all go together, for example, as part of a function or within a loop.

( ) Parentheses are used when you call functions or built-in methods (like fillRect or fillCircle) to show where the parameters go.

It becomes pretty clear when you see it used. The only problem is that with a normal sized font, they can look pretty similar.

Because the designers of Javascript assigned very different meanings to the two sorts of brackets, using the wrong type simply won't work.

Challenge: The program below has an error (notice the red error message and the lack of a rectangle being drawn) because a wrong bracket is being used. See if you can fix 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"); // Draw a filled rectangle, starting top left x and y, for a width and height ctx.fillRect(10, 10, 20, 20}; </script> </body> </html>