Emulate the rectangle tool of graphic-design software by creating a rectangle shape in the same way.




Have you used a graphic-design software to create shapes?

Almost all of them have a pretty standard way of creating rectangle shapes. For example, in Figma, we first select the rectangle tool and then perform a bunch of mouse gestures to create a rectangle shape in the canvas.

Here's a demonstration of using the Rectangle tool in Figma.

To state the interaction precisely, the moment the mouse button goes down, the rectangle-creation logic gets activated. Then, with the button still pressed, as we drag the mouse, a shape gets drawn on the screen following the pointer.

Note that the pivot of the shape is set to the coordinates of the pointer right at the moment when we press the mouse down.

In this exercise, you have to emulate this way of creating shapes using JavaScript.

Here are some points to remember:

  • There is no need to provide a separate button to select the rectangle tool. It should be selected all the time.
  • There is even no need to provide functionality to move the rectangle or maybe resize it. We'll implement such functionalities in later exercises.
  • The background color of the rectangle should always be light grey.