Coding Challenge: HTML Canvas with Stationary Object

Apply the knowledge you gained in the previous lesson to solving this challenging task.

We'll cover the following

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.

Get hands-on with 1200+ tech skills courses.