Building a Drawing App with Canvas — Smooth Lines, Undo, and Shape Tools

#javascript #canvas #webdev #toolzip

Building a Drawing App with Canvas — Smooth Lines, Undo, and Shape Tools

A drawing app is a great Canvas project. Here's how to get smooth lines, implement undo, and add shape tools — including the non-obvious parts.

Smooth Lines with Quadratic Curves

Connecting every mousemove point with straight lines looks jagged. The fix: use quadratic Bezier curves through the midpoints:

let lastX, lastY;

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const { x, y } = getPos(e);

  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  // Midpoint between last and current
  const midX = (lastX + x) / 2;
  const midY = (lastY + y) / 2;
  ctx.quadraticCurveTo(lastX, lastY, midX, midY);
  ctx.stroke();

  lastX = x;
  lastY = y;
});

Undo with State Snapshots

The simplest undo: save the entire canvas state as a data URL after each stroke:

const history = [];
const MAX_HISTORY = 20;

function saveState() {
  history.push(canvas.toDataURL());
  if (history.length > MAX_HISTORY) history.shift();
}

function undo() {
  if (history.length === 0) return;
  const dataUrl = history.pop();
  const img = new Image();
  img.onload = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
  };
  img.src = dataUrl;
}

toDataURL() is slow for large canvases. For better performance, store ImageData objects instead.

Drawing Shapes

Shapes need a "preview" that updates on mousemove without permanently drawing:

let snapshot; // Canvas state before shape starts

canvas.addEventListener('mousedown', () => {
  snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing || tool !== 'rect') return;
  // Restore snapshot, then draw preview
  ctx.putImageData(snapshot, 0, 0);
  const { x, y } = getPos(e);
  ctx.strokeRect(startX, startY, x - startX, y - startY);
});

Loading an Image to Draw Over

For annotation use cases, load an existing image onto the canvas:

function loadImageOntoCanvas(file) {
  const img = new Image();
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    saveState(); // Save as first undo state
  };
  img.src = URL.createObjectURL(file);
}

Touch Support

Add touch events alongside mouse events:

function getPos(e) {
  const rect = canvas.getBoundingClientRect();
  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
  return {
    x: (clientX - rect.left) * (canvas.width / rect.width),
    y: (clientY - rect.top) * (canvas.height / rect.height),
  };
}

The scaling factor handles cases where the canvas display size differs from its actual resolution.

Draw at toolzip.app/tools/drawing-pad.

DEV Community

Building a Drawing App with Canvas — Smooth Lines, Undo, and Shape Tools