InterviewDB
Experience
·
Los Angeles
Paint Editor: Implement Core Canvas Drawing Operations for a Browser-Based Paint Tool
phone
Interview Experience
Problem
Build core operations for a browser-based paint editor using an HTML5 Canvas. Implement: freehand drawing (mouse drag), straight lines, flood-fill (paint bucket), and undo/redo with a 20-step history.
typescript
class PaintEditor {
constructor(canvas: HTMLCanvasElement) {}
setTool(tool: 'brush' | 'line' | 'fill'): void {}
setColor(hex: string): void {}
setBrushSize(px: number): void {}
undo(): void {}
redo(): void {}
// Internal: called on mouse events
private onMouseDown(e: MouseEvent): void {}
private onMouseMove(e: MouseEvent): void {}
private onMouseUp(e: MouseEvent): void {}
}
Example behavior:
editor.setTool('fill');
editor.setColor('#FF0000');
// User clicks on a blue region -> flood-fill changes all connected blue pixels to red
editor.undo(); // restores the blue region
Follow-ups
- How does flood-fill work at the pixel level? What queue-based BFS approach do you use?
- For undo/redo, do you store full canvas snapshots or operation deltas? What are the tradeoffs?
- Freehand drawing at high mouse speed leaves gaps between points — how do you interpolate?
- How would you add a selection tool with copy/paste and move operations?
Full Details
Problem
Build core operations for a browser-based paint editor using an HTML5 Canvas. Implement: freehand drawing (mouse drag), straight lines, flood-fill (paint bucket), and undo/redo with a 20-step history.
typescript
class PaintEditor {
constructor(canvas: HTMLCanvasElement) {}
setTool(tool: 'brush' | 'line' | 'fill'): void {}
setColor(hex: string): void {}
setBrushSize(px: number): void {}
undo(): void {}
redo(): void {}
// Internal: called on mouse events
private onMouseDown(e: MouseEvent): void {}
private onMouseMove(e: MouseEvent): void {}
private onMouseUp(e: MouseEvent): void {}
}
Example behavior:
editor.setTool('fill');
editor.setColor('#FF0000');
// User clicks on a blue region -> flood-fill changes all connected blue pixels to red
editor.undo(); // restores the blue region
Follow-ups
- How does flood-fill work at the pixel level? What queue-based BFS approach do you use?
- For undo/redo, do you store full canvas snapshots or operation deltas? What are the tradeoffs?
- Freehand drawing at high mouse speed leaves gaps between points — how do you interpolate?
- How would you add a selection tool with copy/paste and move operations?
Free preview. Unlock all Merge questions →