Coding Challenge: HTML Canvas with Stationary Object

Task introduction

This is the first challenge task for you to practice the concepts learned so far. You are required to perform the following steps:

• Create an HTML canvas with a height of 300 pixels and a width of 300 pixels.

• Create the graphic shown in the illustration below as per these specifications:

  • The center of the canvas should lie at (150, 150).

  • The center of the circle should lie at the center of the canvas.

  • The radius of the circle should be 50.

  • The background color of the canvas should be sky blue.

  • The fill color and border color of the circle should be yellow and red, respectively.

  • The length and breadth of the rectangle should be 100 and 40, respectively.