S2JS - Introduction to drawing on the canvas : Drawing filled rectangles

The ctx.fillRect statement draws a filled rectangle.

The numbers in the parenthesis (called parameters) indicate the top-left x and y, and the width and height -- all expressed in pixels.

ctx.fillRect(10, 10, 20, 20);

In Javascript-land it's crucially important that upper and lower case is written exactly correctly. One slip of the shift-key and things will fail; frequently cryptically.

Try changing things. Try changing the letter-case in places you might think it doesn't matter. Try changing the x/y or the width/height numbers and see how things change, remembering your canvas is only 300 x 300.

Try to make it short and wide. Try high and narrow.

What happens if your rectangle spills off the side?

Just get a feel for it, because next we'll start to change things around.

<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 fill rectange, starting top left x and y, for a width and height ctx.fillRect(10, 10, 20, 20); </script> </body> </html>