Rectangle Drawer

Draw rectangles directly on a page, resize their edges and move them with Ctrl/Cmd drag.

What it does

A DOM-based interaction exercise that uses native mouse events and an object-oriented JavaScript class, without a canvas library.

Use DOM elements, not canvas: Rectangles are absolutely positioned HTML elements. Dragging changes their styles instead of redrawing a canvas.
Detect edges by distance: The cursor's proximity to each side or corner determines the resize direction.
Keep interactions separate: Drawing, resizing and movement each have their own flags and mouse event paths.

More on the implementation and challenges.

Press and drag on an empty part of the page to create a new rectangle. The dimensions update as the pointer moves.

The editor checks pointer distance from the rectangle's border and chooses the corresponding resize direction.

Holding Ctrl or Cmd while dragging a rectangle's edge switches the interaction from resize to move.

A small size label follows the rectangle during drawing or resizing, then disappears when the operation is complete.

`RectDrawer` listens for mousedown, mousemove and mouseup, using flags for drawing, resizing and moving.

Each rectangle is an absolutely positioned DOM element. The script changes width, height, left and top in response to pointer coordinates.

A small margin around each edge or corner determines which resize cursor and behavior to use.

Problem: The same mouse gesture can create, resize or move a rectangle.

Solution: The class checks whether the pointer is near an existing rectangle and whether Ctrl/Cmd is held before choosing the interaction.

Problem: A drag can produce negative or very small dimensions.

Solution: Drawing uses absolute dimensions and adjusted origins. Resizing enforces a minimum of 10 pixels.

A number-guessing game with score tracking.

Working on something similar? Get in touch.