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

flowchart TB
  subgraph app [Canvas — browser-only app]
    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 --> tools
    pickr --> tools
    history --> canvas
  end

Logic is organized into handler classes (e.g. RedoAndUndoHandler, brushHandler). Webpack bundles the app; the live demo is hosted on GitHub Pages.

Technologies used

Client

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

Tooling

Webpack, npm

Hosting

GitHub Pages