Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Selecting a pen color leaves Example drawing in eraser mode

Open Beginner friendly
  • Is something wrong?
#437 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
frontend

Research direction

Start with the color-button handler and pointer handler in web/example-board.js, then compare their behavior with selectPen() in web/interview.js. Add or update the regression test in example-board.test.js to cover switching from Eraser to a pen color and explicitly selecting Eraser. Done when the selected color draws a pen stroke with the expected width, the toolbar states match the active tool, and Eraser still produces eraser strokes.

Written by the indexing model from the issue text.

Description

Problem and motivation

In the coding interview's Example drawing panel, selecting a pen color after using the eraser does not switch back to the pen. The color button becomes selected, but subsequent strokes still erase existing content. A candidate trying to annotate a diagram in another color can therefore erase it instead.
The color buttons have labels such as Pen Red, which suggest that selecting one activates that pen. The full whiteboard already follows this behavior, so the two drawing surfaces respond differently to the same action.

Steps to reproduce

  1. Select Editor mode and enable Example drawing in the lobby.
  2. Start an interview and enter the live coding phase.
  3. Expand Example drawing and draw a black line.
  4. Select Eraser.
  5. Select the red pen color.
  6. Draw across the black line.
Expected:

Selecting the red pen color activates the pen, and the next stroke draws a red line.

Actual:

The red color is selected, but Eraser remains active and the next stroke erases the black line.

Initial analysis

In web/example-board.js, the color-button handler updates color and the color buttons' aria-pressed states, but leaves tool unchanged. The pointer handler later passes that unchanged tool to model.begin(), so the board continues producing eraser strokes.
The full whiteboard handles this through selectPen() in web/interview.js, which sets both the color and board.tool = "pen" before updating the toolbar. Applying the same interaction rule to Example drawing would make the selected color and the active drawing tool agree.

Proposed implementation

Keep the change within the Example drawing toolbar. Selecting a color should activate the pen and update both the pen/eraser buttons and the color buttons to reflect the resulting state. Eraser behavior should remain available through its explicit control.
Add a regression test that selects Eraser, selects a pen color, and draws a stroke. Assert that the stroke uses the selected color and pen width, that Pen is active, and that Eraser is inactive. Also verify that explicitly selecting Eraser still produces an eraser stroke.

Verification so far

At checkout revision fd7c23c, a module-level reproduction using the actual mountExampleBoard() implementation with simulated DOM and canvas objects produced a white, width-24 eraser stroke after selecting Eraser and then Pen Red. The red color button and Eraser both remained pressed.
The existing example-board.test.js suite passed all eight tests. The interaction above has not yet been manually verified in a real browser; the steps listed above are the browser verification procedure.

Dominant language
Rust
Stars
177
Forks
100
Avg merge
1d 8h
Merged PRs (30d)
168

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from sysprog21/codetrial

All issues in sysprog21/codetrial

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.