CANVAS JavaScript Drawing App 🎨 | Draw ● Undo ● Erase ● Colors | Full HTML5 Canvas App Tutorial

Overview

This tutorial builds a plain HTML5 Canvas JavaScript drawing app (no libraries). It supports drawing with mouse and touch and includes core editing tools like pen controls, clear, and undo.

Features

Drawing on the Canvas

• Drawing is performed via pointer movement using:
  • Touch events (mobile): touchstart, touchmove, touchend
  • Mouse events (desktop): mousedown, mousemove, mouseout
• A boolean flag isDrawing tracks when strokes should render.

Pen Controls

• Color selection
  • Clickable palette buttons:
    • Use onclick
    • Read the element’s style color (the subtitles reference element.style.background)
  • A <input type="color"> picker:
    • Uses oninput to update drawColor
• Brush width selection
  • A <input type="range"> slider:
    • Uses oninput to update drawWidth

Clear (Erase All)

• A “clear” button calls clearCanvas(), which:
  • Resets the canvas using context.clearRect(...)
  • Refills the canvas background color afterward

Undo (Cancel Last Action)

• Uses a history array of snapshots (described as “paths” in subtitles, but implemented as image snapshots):
  • On stroke stop, pushes context.getImageData(0, 0, canvas.width, canvas.height) into the array
  • Undo restores a prior snapshot using context.putImageData(...)
• Uses an index initialized to -1 to track the top of the undo stack.

Tutorial Structure / Key Steps

HTML Layout

• A div.field containing:
  • A <canvas id="canvas">
• A div.tools containing:
  • Action buttons (cancel/undo and clear)
  • A color palette area and inputs for color and pen width

CSS Styling

• The tool area uses display: flex and centers controls vertically/horizontally.
• Palette buttons are circular with:
  • border-radius: 50%
  • a white border
• Adds shadow/border styling to the canvas and sets cursor: pointer.

Canvas Initialization

• Sets:
  • canvas.width = window.innerWidth - 60
  • canvas.height = 400
• Creates a 2D context with canvas.getContext('2d').
• Fills the initial background (subtitles mention “white”; clearing later also refills with a background color).

Drawing Mechanics

start(event)

• Sets isDrawing = true
• Begins a new stroke path with context.beginPath()
• Moves to the pointer position adjusted by canvas offsets:
  • event.clientX - canvas.offsetLeft
  • event.clientY - canvas.offsetTop
• Calls event.preventDefault() to stop default browser behavior.

draw(event)

• If isDrawing is true, draws connected line segments using:
  • context.lineTo(...)
  • context.strokeStyle = drawColor
  • context.lineWidth = drawWidth
  • Smooth strokes via:
    • context.lineCap = 'round'
    • context.lineJoin = ...
  • Then calls context.stroke()

stop(event)

• Closes the stroke path with context.closePath()
• Sets isDrawing = false
• Captures an undo snapshot using getImageData and pushes it to history.

Undo Logic Details

• Avoids creating extra snapshots (e.g., for events like mouseout) by conditioning snapshot creation based on event type.
• Undo behavior:
  • If history is empty, it clears the canvas
  • Otherwise:
    • Decrements the index
    • Restores the previous snapshot using context.putImageData(...)

Main Speakers / Sources

• Phil (the tutorial author/host)