Canvas

Fun drawing app project built with vanilla JavaScript and HTML5 Canvas API.

#BrushAndEraserControls
#UndoRedo
#OpacityControls
#ImageExport

Project overview

Canvas is an intuitive drawing application built with Vanilla JavaScript and the HTML5 Canvas API. It provides users with a digital canvas, featuring customizable brush sizes, an extensive color palette, undo/redo functionality, and the ability to save their canvas.

Engineering challenges

Implementing undo/redo with path arrays (drawnPaths, redoStack) and replaying strokes through redrawPath instead of pixel snapshots—so history stays tractable as drawing sessions grow.
Modeling the eraser as paths with an isErase flag so redrawPath paints with the current background color—eraser marks live in the same undo stack as brush strokes.
Changing background color in bgColorChange without losing artwork: preserving path stacks, clearing the canvas, re-tinting eraser points, then redrawing every stored path.

Features

Freehand drawing with a brush tool
Customizable brush and eraser sizes
Rich color palette with opacity control for both brush and background
Undo, redo, and clear functionality for precise editing
Save creations with a built-in download feature

Architecture

At a glance

Single-page vanilla JS app; no router, no backend, no build-time framework.
Toolbar drives brush, eraser, and paint-bucket tools with Pickr for brush and background color.
Strokes live in drawnPaths; Canvas API renders them; PNG export via download button.

App surface

#canvas (HTML5 drawing surface)
Toolbar (brush, eraser, paint bucket)
Pickr (brush and background color)
Size slider (brush and eraser)
Undo, redo, clear, and download buttons

Handler modules

RedoAndUndoHandler (drawnPaths + redoStack, undo, redo, redrawPath)
brushHandler (stroke styling and freehand drawing)
eraseAndClearHandler (eraser paths with isErase, clear canvas)
colorHandler (brush color and background color state)
bgColorChange() (refill background and repaint eraser-colored paths without losing history)

Deploy & tooling

Webpack bundles vanilla JS and Sass; npm manages dependencies; static deploy on GitHub Pages.

---
config:
  flowchart:
    rankSpacing: 72
---
flowchart TB
  subgraph ui [1. UI layer]
    html[HTML — toolbar and layout]
    sass[Sass — component styles]
    pickr[Pickr — color picker]
  end
  subgraph logic [2. OOP application layer]
    tools[Brush, eraser, paint bucket handlers]
    history[Undo/redo — drawnPaths + redoStack]
    tools --> history
  end
  subgraph render [3. Rendering and export]
    canvas[HTML5 Canvas API]
    download[PNG download — HTML5 download attribute]
    canvas --> download
  end
  html -->|Toolbar events| tools
  pickr -->|Color selection| tools
  history -->|Redraw paths| download

Technologies used

Client

Vanilla JavaScript, HTML, CSS (Sass), HTML5 Canvas API, Pickr Library (color picker)

Tooling

Webpack, npm

Hosting

GitHub Pages