Build a full-featured drawing application using HTML5 Canvas. Users can draw, paint, and create artwork with various tools including brushes, shapes, and color palettes.

Project Checklist

• Set up HTML5 Canvas element and drawing context
• Implement basic drawing functionality with mouse/touch events
• Create a toolbar with different brush sizes and colors
• Add shape tools (circle, rectangle, line)
• Implement undo/redo functionality
• Add ability to save drawings as images

Bonus Project Checklist Items

• Add layers support for complex drawings
• Implement different brush types (pencil, marker, spray, eraser)
• Add image import and editing capabilities
• Create a color picker with custom color selection
• Add text tool for adding labels to drawings
• Implement drawing history playback

Inspiration (Any companies/libraries similar)

• MS Paint
• Sketchpad
• Procreate (simplified version)

Hint/Code snippet to start

To get started, you can use the following code snippet to set up basic drawing:

const canvas = document.getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
  if (!isDrawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
}