Warning! This page is still in the works.


cc.fillStyle = "color"
cc.fillRect(x, y, w, h)

In regards to the above, please note the following:

  • All words are lowercase except for the S in style.
  • The color should be an HTML color name, e.g., lightcoral, hotpink, lightsalmon.
  • The HTML color name should have no spaces at all.

    • cc.fillStyle = "color"
    cc.fillRect(x, y, w, h)

    Courtesy of Mozilla


  • The 'x,' 'y,' 'w,' and 'h' should have either a number or variable.
  • The 'x' and 'y' tell the computer where to start drawing the upper left corner of the rectangle.
  • 'y' coordinate is inverted.
  • The 'w' and 'h' are the width and height of the rectangle.

    • Warning! Note that the width of the entire screen is 500 and the height, 600. X and Y variables exceeding the width/height of canvas means that the shape will not be seen.
    Hey there! Now that you know how rectangles operate, we'll use that knowledge to draw one!