Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This project is part of the TOP's (The Odin Project) curicculum of learning by doing.

Written in HTML, CSS, and Javascript/jQuery

You can check it out here. Check it out, sketch something cool and have fun!


  • Simple drawing board to express your inner artist
  • Change brush size, roundness, opacity and color of the brush, like a real painter
  • Check out the rainbow feature for an awesome effect
  • Rocks some pretty cool HTML5 sliders
  • Header image changes with you changing the sliders

How to use it

  1. Set the canvas (brush) size by sliding the Canvas density slider (bigger the number, smaller the brush)
  • If you want to change the brush size, simply move the cursor to desired size (it will clear everything)
  1. Set the Roundness and Opacity to your preferance (bigger the number, rounder it is; smaller the number, less opaque it is)
  2. Set the color by picking from the color picker
  3. If you need to erase, clik the 'Eraser OFF button' (will change to 'Eraser ON'); when done erasing, click it again
  4. To clear the canvas, click the 'Clear' button and click OK when prompted
  5. Click the 'Rainbow OFF' button for a surprise (and click it again if you didn't like it)
Sneak peek

How it works

Tabula rasa

Smiley face

Can you see the number?