DrawIsland Documentation

Complete guide to all drawing tools and features

Drawing Tools

Pencil
  • Freehand drawing on the canvas
  • Adjustable size (1–80px) via sidebar slider or Pencil modal
  • Adjustable opacity (5–100%) via Pencil modal
  • Paths are selectable objects after drawing
Brushes
  • Pencil — standard freehand line
  • Pen — thin precision line with soft shadow
  • Brush — wide semi-transparent stroke
  • Marker — flat square-tipped stroke
  • Spray — scattered spray paint effect
  • Chalk — textured chalk effect
  • Watercolor — soft radial color blobs
  • Ink — variable-width calligraphy line
  • Size and opacity adjustable in the Brushes modal
Eraser
  • Paints white over the canvas
  • Same size control as pencil
Fill
  • Click a shape to fill it with the current color
  • Click the background for flood-fill
  • Works correctly at any zoom level
Text
  • Places an editable text object at canvas center
  • Double-click to edit content
  • Font family: Arial, Georgia, Impact, Courier, Verdana, Comic Sans, Times New Roman
  • Font size (8–120px), color, adjustable in the right panel when selected

Shapes

Shape picker
  • Rectangle (outline or filled)
  • Circle (outline or filled)
  • Triangle
  • Line
  • Arrow
  • Star
  • Click to insert at canvas center, then drag handles to resize
  • Drag directly on canvas for free-draw shapes (rect, circle, triangle, line)
  • Stroke color and width use current color and brush size

Select & Object Properties

Select
  • Click an object to select it
  • Drag over multiple objects to select them all
  • Arrow keys to nudge (hold Shift for 10px steps)
  • Delete / Backspace to remove selection
Delete
  • Remove selected object(s) from canvas
  • Also via right panel Delete button
Clone
  • Duplicate selected object, offset by 20px
  • Clone is immediately selected and ready to move
Flip H / Flip V
  • Mirror selected object horizontally or vertically
Layer order
  • Up — bring selected object one step forward
  • Down — send selected object one step backward
  • Fill background layer is always protected at the bottom
Opacity
  • Adjust object transparency (0 = invisible, 1 = fully opaque)
Stroke
  • Set outline color and width (0–20px) on any selected object
Shadow
  • Shadow color, blur (0–50), offset X and Y (−100 to 100)
  • Works on any selected object

Color

Color picker
  • Pick any color via native color input
  • 12 preset swatches for quick access
  • Opacity slider (5–100%) affects new strokes and selected objects
  • Recent colors palette auto-filled as you draw
  • Mini palette in sidebar for one-click color switching

Image

Upload
  • Add any image file from your device
  • Auto-scaled to fit the canvas at 80%
  • Placed as a selectable, resizable object
Image Library
  • Pre-made SVG images organized by category
  • Categories: Animal, Meme, Media, Food, Nature, Number, Symbol
  • Click a thumbnail to add to canvas center
  • Images are scaled to 80% of canvas size
Crop
  • Drag corner handles to define crop area
  • Drag center to reposition the zone
  • Click Apply to crop, Cancel to abort
  • Canvas resizes to the cropped dimensions
Image filters
  • Select an image object first with the Select tool
  • Brightness −1 to 1
  • Contrast −1 to 1
  • Saturation −1 to 1
  • Blur 0 to 1
  • Reset Filters button restores the original

Canvas

Canvas size
  • Presets: 800×520, 1200×630, Square (800×800), Portrait (600×900)
  • Custom size with manual width/height input
  • Current size shown in bottom-left of canvas area
  • Last used size is remembered between sessions
Clear canvas
  • Remove all objects and reset to white background
  • Confirmation required — action is irreversible

Zoom

Zoom controls
  • + / buttons in the bottom-right corner
  • Mouse wheel to zoom in/out at cursor position
  • Pinch gesture on touch screens
  • Click the zoom percentage to fit all objects in view
  • Minimum zoom: 100% (no zoom out below original size)
  • Maximum zoom: 600%
  • Zoom resets to 100% on page load

File

Download
  • PNG — with transparency, full resolution
  • JPG — with white background, full resolution
  • PDF — vector-friendly, correct canvas proportions
  • Export always uses the real canvas size, not the zoomed view
Projects
  • Save up to 5 projects in your browser (localStorage)
  • Name each project before saving
  • Load any saved project (replaces current canvas)
  • Delete individual projects
  • Saving a 6th project removes the oldest automatically
Save to Gallery
  • Publish your drawing publicly to the DrawIsland gallery
  • Requires a free account (login or sign up)
  • Add title (required, 2–100 chars), description and tags (optional)
  • Option to allow others to remix your drawing
  • Drawings may require admin approval before appearing publicly
Auto-save
  • Your work is automatically saved to your browser every ~1.2 seconds
  • Restored automatically on next visit
  • Always starts at 100% zoom on reload

History

Undo / Redo
  • Up to 60 steps of history
  • Tracked actions: draw, shapes, fill, text, move, resize, delete, crop, clone
  • Undo via sidebar button or Ctrl+Z
  • Redo via sidebar button or Ctrl+Y / Ctrl+Shift+Z

Keyboard Shortcuts

CtrlZ
Undo
CtrlY
Redo
CtrlShiftZ
Redo (alternate)
Delete / Backspace
Delete selected object(s)
↑ ↓ ← →
Nudge selected object 1px
Shift↑ ↓ ← →
Nudge selected object 10px
Escape
Close any open modal
Scroll
Zoom in / out at cursor
Pinch
Zoom in / out (touch)

Mobile

Mobile toolbar
  • Compact toolbar at the top: Pencil, Eraser, Select, Color, Size, Undo, Redo, Save
  • More button reveals Fill, Text, Rect, Circle, Arrow, Clear, Upload, Share
  • Color dot opens native color picker
  • Size adjusted with / + buttons
  • Share button uses native share sheet (downloads on desktop)
  • Sidebar and right panel are hidden on mobile