All Projects
Intermediate · Case Study

SketchOn

Digital sketching, right in your browser.

SketchOn is a canvas-based drawing app with brush tools, colour palettes, layer support, and export — no install, no sign-in.

CSSCanvas APIJavaScriptHTML5
Live DemoGitHub
SketchOn

The Problem

What needed solving.

Quick digital sketches usually require Photoshop or Procreate. There's a clear need for a fast, zero-friction browser sketchpad for notes, diagrams, and casual art.

The Solution

How I solved it.

A full-featured HTML5 Canvas drawing app with pressure-simulated brushes, multiple layers, undo/redo, and PNG export — loads instantly in any browser.

Features

What it does.

Brush Tools

Pencil, brush, eraser, and fill tools with adjustable size and opacity.

Brush Tools

Colour Palette

Full colour picker with recent colours and hex input.

Undo / Redo

Full history stack — step back and forward through your drawing.

Export PNG

Download your sketch as a transparent or white-background PNG.

System Architecture

How it's built.

CanvasHTML5 Canvas APIAll drawing operations, pixel manipulation
StateJavaScriptTool state, history stack, layer management
UICSS3Toolbar, palette, responsive layout
DeploymentVercelStatic deployment

Technology Stack

Frontend

HTML5 CanvasCSS3JavaScript

Deployment

Vercel

Challenges & Solutions

Real problems, real fixes.

Challenge

Undo history consuming too much memory on large canvases.

Solution

Capped the history stack at 50 states and stored compressed image data snapshots.

Demo & Screenshots

See it live.

SketchOn canvas

Drawing canvas with toolbar

Explore the full source code and documentation.

View on GitHubLive Demo← All Projects