Three Prompts: Etch A Sketch

Introduction

Remember the classic Etch A Sketch toy? That red plastic frame with two white knobs that let you create line drawings on a gray screen? This project brings that nostalgic experience to the digital world as a responsive web application.

What makes this project special is that it was created entirely through AI assistance using only three prompts. From setting up the canvas drawing functionality to ensuring mobile compatibility, the entire application was built incrementally through clear, focused instructions. The result is a fully functional Etch-a-Sketch clone that works seamlessly on both desktop and mobile devices.

The Three Prompts

Here are the exact prompts that were used to create this project:

in @projects/etch-a-sketch Make the following.

First update the readme, to list these features and can be used as a checklist to show progress. Once done with the readme, start implementing until you are finished

**Etch-a-Sketch Clone (Canvas Drawing Tool)**

Mouse Down/touch on mobile to control a “pen” on a grid canvas.
- Color Selection

Can reset or download the drawing.
- Shake to clear animation.

Responsiveness:
- Make the canvas auto scale to the screen size.
- There should ne no side scrolling needed on desktop or mobile

Color Switches:
- Keep the sketch when switching colors

/execute

Fix the touch events on mobile

Review how it works, then make a detailed plan on how to fix just th mobile issues. Don't break anything on desktop.

Then:
/execute

Technologies Used

This Etch-a-Sketch clone leverages several modern web technologies:

• React - For building the user interface and managing component state
• Vite - As a fast and efficient build tool and development server
• HTML5 Canvas API - For the drawing functionality
• CSS3 - For styling and animations, including the shake effect
• Touch Events API - For mobile touch support

The application uses React's hooks (useState, useRef, useEffect) to manage state and interact with the DOM, while the HTML5 Canvas API provides the drawing surface. CSS animations bring the classic shake-to-erase functionality to life.

Key Features and Functionality

The Etch-a-Sketch application includes several key features:

Drawing Canvas

The core of the application is a responsive canvas that allows users to draw by moving their mouse (on desktop) or finger (on mobile). The drawing mechanism mimics the continuous line style of the original toy.

Color Selection

Unlike the original toy which only allowed black lines, this digital version includes a color palette with seven options: black, red, green, blue, yellow, magenta, and cyan. Users can switch colors at any time without losing their current drawing.

Shake to Clear

Staying true to the original toy's mechanics, the application includes a "Shake to Clear" button that triggers a realistic shaking animation before erasing the canvas.

Download Functionality

A modern addition to the classic concept, users can download their creations as PNG images with a single click.

Responsive Design

The canvas automatically resizes to fit different screen sizes while preserving the drawing, ensuring a good experience on both desktop and mobile devices.

Implementation Details

Canvas Setup and Drawing Logic

The drawing functionality is implemented using the HTML5 Canvas API. The application sets up the canvas context with specific properties:

// Setup context
const context = canvas.getContext('2d');
context.lineCap = 'round';
context.strokeStyle = currentColor;
context.lineWidth = 5;
contextRef.current = context;

Drawing is handled through mouse and touch event handlers that track when the user starts drawing, moves while drawing, and stops drawing:

const startDrawing = ({ nativeEvent }) => {
  const { offsetX, offsetY } = nativeEvent;
  contextRef.current.beginPath();
  contextRef.current.moveTo(offsetX, offsetY);
  setIsDrawing(true);
};

const draw = ({ nativeEvent }) => {
  if (!isDrawing) {
    return;
  }
  const { offsetX, offsetY } = nativeEvent;
  contextRef.current.lineTo(offsetX, offsetY);
  contextRef.current.stroke();
};

Responsive Canvas with Drawing Preservation

One of the challenges was making the canvas responsive while preserving the drawing when the window is resized or when switching colors. This was solved by saving the current drawing to a temporary canvas before resizing:

// Save current drawing
const tempCanvas = document.createElement('canvas');
const tempContext = tempCanvas.getContext('2d');
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
tempContext.drawImage(canvas, 0, 0);

// Resize canvas
canvas.width = containerWidth;
canvas.height = containerHeight;

// Restore drawing if it exists
if (tempCanvas.width > 0 && tempCanvas.height > 0) {
  context.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, canvas.width, canvas.height);
}

Mobile Touch Support

Special care was taken to ensure the application works well on touch devices. This required dedicated touch event handlers that calculate touch coordinates relative to the canvas and prevent default scrolling behavior:

const getTouchPos = (canvasDom, touchEvent) => {
  const rect = canvasDom.getBoundingClientRect();
  return {
    offsetX: touchEvent.touches[0].clientX - rect.left,
    offsetY: touchEvent.touches[0].clientY - rect.top
  };
};

const handleTouchStart = (e) => {
  e.preventDefault();
  if (e.touches.length === 1) {
    const touch = getTouchPos(canvasRef.current, e);
    contextRef.current.beginPath();
    contextRef.current.moveTo(touch.offsetX, touch.offsetY);
    setIsDrawing(true);
  }
};

Shake Animation

The shake animation that mimics the original toy's erasing mechanism is implemented using CSS keyframes:

@keyframes shake {
  0% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-5px, -5px) rotate(-2deg); }
  20% { transform: translate(5px, -5px) rotate(2deg); }
  /* ... more keyframes ... */
  100% { transform: translate(0, 0) rotate(0); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

Challenges and Solutions

Challenge 1: Mobile Touch Events

Initially, the application used simulated mouse events for touch functionality, which caused issues on mobile devices. The solution was to implement dedicated touch event handlers that correctly calculate touch coordinates relative to the canvas and prevent default scrolling behavior.

Challenge 2: Preserving Drawings During Color Changes

When changing colors, the canvas context needed to be updated, which initially caused the drawing to be lost. This was solved by using React's useEffect hook to update the context's stroke style whenever the color changes, without affecting the existing drawing.

Challenge 3: Responsive Canvas Without Side Scrolling

Making the canvas responsive while preventing side scrolling on mobile devices required careful CSS styling. The solution included setting overflow-x: hidden on the root elements and using touch-action: none on the canvas to prevent default touch behaviors.

Conclusion

This Etch-a-Sketch clone demonstrates how a classic toy can be reimagined for the digital age using modern web technologies. Through just three focused prompts, we were able to create a fully functional application that captures the essence of the original toy while adding modern features like color selection and download capabilities.

The project showcases the power of React and the Canvas API for creating interactive drawing applications, as well as the importance of responsive design and proper touch event handling for ensuring a good experience across devices.

Try it out yourself and unleash your creativity with this digital Etch-a-Sketch! And if you're interested in seeing how other projects can be built with just three prompts, check out the full Three Prompts collection.

Links

• Try the Etch-a-Sketch App
• Browse the Three Prompts Collection