Chapter 7, Episode 10: Final Project - Drawing App

Introduction

Welcome to the final episode of Chapter 7! In this culminating lesson, we'll bring together everything we've learned about HTML Canvas to create a complete drawing application. Our app will feature:

• Color selection with a color picker
• Adjustable brush sizes
• A clear button to reset the canvas
• The ability to save your artwork as an image

Let's see how the McTweak team approaches this exciting final project!

The McTweak Team's Drawing App Challenge

TRASHY

[finger-painting wildly]

I CALL THIS ONE "DIGITAL DREAMS IN AN ANALOG NIGHTMARE!" It represents the existential struggle of pixels trying to break free from their two-dimensional prison! [holds up paper with random colorful blotches]

FATTY

[examining a donut with artistic scrutiny]

As you can see, I've pioneered a new art technique—Donut Expressionism. The bite marks represent society's consumption of technology, while the sprinkles signify the fragmenting of digital consciousness. [takes another bite] This is a limited-time exhibit, as it's rapidly... disappearing.

ALLY

[sighs, still working on the drawing app interface]

Our final project is a DIGITAL drawing app, not whatever... food performance art you're doing over there.

GRUMPY

[frantically reviewing code]

THIS COLOR PICKER CODE IS A SECURITY CATASTROPHE! What if someone selects a color SO BRIGHT it causes retinal damage?! Have you implemented a LEGALLY-BINDING waiver for users who choose neon colors?! WHO APPROVED UNLIMITED COLOR SELECTION WITHOUT A SAFETY COMMITTEE REVIEW?!

CODY

[trying to wipe paint off his keyboard]

I think I've got the brush size slider working, but every time I test it, my cursor gets bigger and I can't click anything smaller than the entire screen. Is that... normal?

ASHLEY

[walking in with a tablet]

The client specified very clear requirements for this project: color selection, adjustable brush sizes, a clear button, and the ability to save images. Our current implementation offers... [looks at TRASHY's finger paintings and FATTY's half-eaten donuts] ...abstract food-based performance art?

TRASHY

[jumping up excitedly]

WAIT! I just had an EPIPHANY! What if we make a drawing app where you can't actually CHOOSE what you draw? The computer decides FOR you! It's like a commentary on the illusion of free will in the digital age!

ALLY

[deadpan]

That's called a broken app, Trashy.

FATTY

[indignantly]

Excuse me, but I've been conducting critical user experience research! [holds up donut] For example, I've discovered that users prefer circular brush tools over square ones. My methodology is extremely rigorous and delicious.

GRUMPY

[eyeing a color picker suspiciously]

Do you realize that allowing users to select RGB values introduces exactly 16,777,216 potential security vulnerabilities? ONE FOR EACH COLOR! We should restrict the palette to fifty pre-approved, security-hardened shades of GRAY!

ALLY

[exasperated]

Gray? For a drawing app?

GRUMPY

[defensively]

FIFTY SHADES SHOULD BE MORE THAN ENOUGH FOR ANY RESPONSIBLE ARTIST!

SNOWZIE

[trots in, followed by GARBAGE who surveys the artistic chaos with a pained expression]

GARBAGE

[looking at the mess]

I see we're taking a very... hands-on approach to building a digital drawing application.

TRASHY

[proudly]

I'm exploring the tactile aspects of the user experience!

GARBAGE

[picking up one of TRASHY's paintings]

This looks like you let a hyperactive squirrel loose on a canvas after feeding it espresso beans.

TRASHY

[beaming]

THANK YOU! That's EXACTLY the aesthetic I was going for!

Building the Drawing App: Essential Components

GARBAGE

[sitting at the computer]

Let's focus on what matters. A drawing app needs four key components: a color selection system, brush size control, a way to clear the canvas, and a way to save your work.

CODY

[taking notes]

So... not donut expressionism?

FATTY

[mouth full]

Art critics are so closed-minded these days.

1. Setting Up the Canvas

First, we need to set up our HTML structure with a canvas element and controls:

<!-- HTML Structure -->
<div class="drawing-app">
  <canvas id="drawingCanvas" width="800" height="500"></canvas>
  
  <div class="controls">
    <div class="control-group">
      <label for="colorPicker">Color:</label>
      <input type="color" id="colorPicker" value="#000000">
    </div>
    
    <div class="control-group">
      <label for="brushSize">Brush Size:</label>
      <input type="range" id="brushSize" min="1" max="50" value="5">
      <div id="brushPreview"></div>
    </div>
    
    <button id="clearCanvas">Clear Canvas</button>
    <button id="saveImage">Save Image</button>
  </div>
</div>

GARBAGE

[already coding]

First, we need an intuitive color picker that gives users full RGB control while remaining user-friendly.

ALLY

[nodding]

I've been working on that. A color wheel with sliders for fine adjustments works well for most users.

2. Implementing the Drawing Functionality

Now let's set up JavaScript to handle drawing on the canvas:

// Drawing App JavaScript
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

// Variables to track drawing state
let isDrawing = false;
let lastX = 0;
let lastY = 0;

// Set initial styles
ctx.lineCap = 'round'; // Round line ends
ctx.lineJoin = 'round'; // Round joins between lines
ctx.strokeStyle = '#000000'; // Default: black
ctx.lineWidth = 5; // Default: 5px

// Drawing functions
function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e) {
  if (!isDrawing) return; // Stop if not drawing
  
  // Begin a new path
  ctx.beginPath();
  
  // Start from
  ctx.moveTo(lastX, lastY);
  
  // Draw line to current position
  ctx.lineTo(e.offsetX, e.offsetY);
  
  // Apply the stroke
  ctx.stroke();
  
  // Update last position
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
  isDrawing = false;
}

// Add event listeners for mouse/touch
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

// Touch support for mobile devices
canvas.addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousedown', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
});

// Similar touch event handlers for move and end...

GARBAGE

[continuing]

Next, brush size control. Simple slider interface, with visual feedback showing the current brush size.

CODY

[relieved]

That makes more sense than my approach of "click and hope for the best."

3. Color Selection

Let's implement the color selection feature:

// Color Selection
const colorPicker = document.getElementById('colorPicker');

colorPicker.addEventListener('input', function() {
  // Update the stroke color
  ctx.strokeStyle = colorPicker.value;
});

// Optional: Add preset colors
function setupColorPresets() {
  const presets = [
    '#000000', '#ffffff', '#ff0000', '#00ff00', 
    '#0000ff', '#ffff00', '#ff00ff', '#00ffff'
  ];
  
  const presetContainer = document.getElementById('colorPresets');
  
  presets.forEach(color => {
    const colorButton = document.createElement('button');
    colorButton.className = 'color-preset';
    colorButton.style.backgroundColor = color;
    
    colorButton.addEventListener('click', () => {
      colorPicker.value = color;
      ctx.strokeStyle = color;
    });
    
    presetContainer.appendChild(colorButton);
  });
}

GARBAGE

[typing]

For clearing the canvas, a simple button with confirmation to prevent accidental erasure.

GRUMPY

[still concerned]

But what about MALICIOUS CLEARING? We need at least THREE forms of verification and possibly a retinal scan!

4. Brush Size Control

Now let's implement the brush size control:

// Brush Size Control
const brushSlider = document.getElementById('brushSize');
const brushPreview = document.getElementById('brushPreview');

function updateBrushPreview() {
  const size = brushSlider.value;
  
  // Update the stroke width
  ctx.lineWidth = size;
  
  // Update the preview circle
  brushPreview.style.width = size + 'px';
  brushPreview.style.height = size + 'px';
  brushPreview.style.backgroundColor = colorPicker.value;
}

// Update when the slider changes
brushSlider.addEventListener('input', updateBrushPreview);

// Update when color changes too
colorPicker.addEventListener('input', updateBrushPreview);

// Initialize preview
updateBrushPreview();

5. Clear Canvas Function

Let's implement the clear canvas functionality:

// Clear Canvas
const clearButton = document.getElementById('clearCanvas');

clearButton.addEventListener('click', function() {
  // Ask for confirmation
  const confirmed = confirm('Are you sure you want to clear the canvas?');
  
  if (confirmed) {
    // Clear the entire canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
});

GARBAGE

[typing]

And finally, saving the artwork. We'll use the Canvas toDataURL method to convert it to an image format like PNG.

6. Save Image Functionality

Finally, let's implement the save functionality:

// Save Image
const saveButton = document.getElementById('saveImage');

saveButton.addEventListener('click', function() {
  // Create a temporary link
  const link = document.createElement('a');
  
  // Set download name
  link.download = 'my-drawing.png';
  
  // Convert canvas to data URL (PNG format)
  link.href = canvas.toDataURL('image/png');
  
  // Trigger download by simulating click
  link.click();
});

ASHLEY

[reviewing the code]

This covers all the client requirements while keeping the interface intuitive. Good work.

SNOWZIE

[approaches the computer curiously, tail wagging slightly]

Drawing App Demo

Try out our completed drawing application! Draw something, change colors and brush sizes, clear the canvas, and save your artwork.

FATTY

[watching GARBAGE code]

But where's the innovation? The disruption? The premium experience?

GARBAGE

[without looking up]

Sometimes the best user experience is one that gets out of the way and lets people create without friction. Not everything needs to be "disrupted," especially tools for creativity.

ALLY

[impressed]

That's... surprisingly insightful.

TRASHY

[looking at the emerging drawing app]

But can it make EXPLOSIONS when you draw too fast? Or maybe the brush could leave a TRAIL OF FIRE?

GARBAGE

[sighing]

As an optional feature, perhaps. But the core functionality comes first.

Enhancing Your Drawing App

Now that we have a working drawing app with all the required features, let's explore some ways you can enhance it:

1. Undo/Redo Functionality

// Store canvas states for undo/redo
let undoStack = [];
let redoStack = [];

function saveState() {
  // Max 10 states to prevent memory issues
  if (undoStack.length >= 10) {
    undoStack.shift(); // Remove oldest state
  }
  
  // Save current state
  undoStack.push(canvas.toDataURL());
  
  // Clear redo stack
  redoStack = [];
}

function undo() {
  if (undoStack.length === 0) return;
  
  // Save current state to redo stack
  redoStack.push(canvas.toDataURL());
  
  // Load previous state
  const img = new Image();
  img.src = undoStack.pop();
  img.onload = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
  };
}

2. Different Brush Types

// Add different brush types
const brushTypes = {
  normal: function(e) {
    // Standard brush (current implementation)
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  },
  
  spray: function(e) {
    // Spray/airbrush effect
    const density = 50;
    const radius = ctx.lineWidth;
    
    for(let i = 0; i < density; i++) {
      const angle = Math.random() * Math.PI * 2;
      const r = Math.random() * radius;
      
      const x = e.offsetX + r * Math.cos(angle);
      const y = e.offsetY + r * Math.sin(angle);
      
      ctx.beginPath();
      ctx.arc(x, y, 0.5, 0, Math.PI * 2);
      ctx.fill();
    }
  },
  
  calligraphy: function(e) {
    // Simulated calligraphy pen
    const angle = Math.atan2(e.offsetY - lastY, e.offsetX - lastX) + Math.PI/4;
    
    // Save context state
    ctx.save();
    
    // Set line width based on angle
    ctx.lineWidth = (Math.abs(Math.cos(angle)) * 10) + 1;
    
    // Draw the line
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    
    // Restore context
    ctx.restore();
  }
};

SNOWZIE

[paws at the screen, seemingly drawing something with her nose]

ASHLEY

[amazed]

Is... is Snowzie actually using the app?

GARBAGE

[smiling slightly]

The ultimate user test. If an elkhound can use your interface, you've done something right.

TRASHY

[suddenly inspired]

WAIT! What if we add a "Paint Like An Elkhound" filter?!

Further Enhancements

GARBAGE

[to audience]

And that's how we build a complete drawing application. By combining everything we've learned about canvas—from basic shapes to colors, lines, and saving images—we can create a tool that lets users express their creativity. Even if they're not all creating... donut expressionism.

FATTY

[offended]

You just don't understand my artistic vision!

SNOWZIE

[barks happily at her digital creation—a simple but recognizable drawing of what might be a dog... or possibly a very furry horse]

GARBAGE

[to audience]

Now let's put all these pieces together to create our final project: a complete drawing app with color selection, brush size options, clear functionality, and image saving.

FATTY

[ceremoniously, holding up his last donut]

THE CODE IS COMMITTED!

Summary