TypeScript Tutorial: Building a Simple Interactive Drawing App

Written by

learnmodernjavascript

in

Ever wished you could create your own digital art tools? Or perhaps you’ve wanted to build a simple application where users can sketch and doodle? This tutorial will guide you through building a basic interactive drawing application using TypeScript. We’ll cover the core concepts needed to capture user input, draw shapes on a canvas, and even allow for different colors and brush sizes. This project is perfect for beginners and intermediate developers looking to expand their TypeScript and web development skills.

Why Build a Drawing App?

Building a drawing app is a fantastic way to learn about several key web development concepts. You’ll get hands-on experience with:

  • HTML Canvas: The fundamental element for drawing graphics.
  • TypeScript: A superset of JavaScript that adds static typing.
  • Event Handling: Capturing user interactions (mouse clicks, mouse movements).
  • Object-Oriented Programming (OOP): Structuring your code for better organization and reusability.
  • User Interface (UI) Design: Creating a simple, intuitive interface.

Moreover, it’s a fun and engaging project that allows you to see immediate visual results, making the learning process more rewarding.

Setting Up the Project

Before we dive into the code, let’s set up our project environment. We’ll need:

  • Node.js and npm (Node Package Manager): For managing dependencies and running our development server. You can download these from nodejs.org.
  • A Code Editor: Like Visual Studio Code, Sublime Text, or Atom.
  • Basic HTML, CSS, and JavaScript knowledge: While we’ll focus on TypeScript, some familiarity with these web technologies is helpful.

Let’s create a new project directory and initialize it with npm:

mkdir drawing-app
cd drawing-app
npm init -y

This creates a package.json file, which will track our project’s dependencies.

Next, install TypeScript and a few other helpful packages:

npm install typescript --save-dev
npm install --save-dev @types/node @types/dom-parser
  • typescript: The TypeScript compiler.
  • @types/node: Type definitions for Node.js (if you plan to use Node.js related features).
  • @types/dom: Type definitions for the DOM (Document Object Model).

Now, let’s create a tsconfig.json file to configure the TypeScript compiler. Run the following command in your terminal:

npx tsc --init

This generates a tsconfig.json file with default settings. You can customize these settings to fit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files (e.g., "outDir": "./dist"). For this project, the default settings will work fine.

Finally, let’s create our project files:

  • index.html: The HTML file that will contain our canvas and UI elements.
  • src/index.ts: The main TypeScript file where we’ll write our drawing logic.

HTML Structure (index.html)

Let’s start with the HTML structure. This is where we’ll define our canvas and any UI elements we need, such as color pickers or brush size controls.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Drawing App</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #drawingCanvas {
            border: 1px solid black;
            margin-top: 20px;
        }

        #controls {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <h1>Interactive Drawing App</h1>
    <canvas id="drawingCanvas" width="800" height="600"></canvas>
    <div id="controls">
        <input type="color" id="colorPicker" value="#000000">
        <input type="range" id="brushSize" min="1" max="20" value="5">
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

Here’s a breakdown of the HTML:

  • <canvas id="drawingCanvas" width="800" height="600"></canvas>: This is the canvas element where we’ll draw. We set the width and height attributes to define its dimensions.
  • <input type="color" id="colorPicker" value="#000000">: A color picker input, allowing the user to select the drawing color.
  • <input type="range" id="brushSize" min="1" max="20" value="5">: A range input (slider) for controlling the brush size.
  • <script src="dist/index.js"></script>: This line includes the compiled JavaScript file generated by the TypeScript compiler. We’ll put our TypeScript code in src/index.ts, and the compiler will output the JavaScript to the dist folder.

TypeScript Logic (src/index.ts)

Now, let’s write the TypeScript code that will handle the drawing functionality. This is where the magic happens!


// Get the canvas element and its 2D rendering context
const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

// Get the color picker and brush size elements
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;
const brushSizeSlider = document.getElementById('brushSize') as HTMLInputElement;

// Initialize drawing variables
let isDrawing = false;
let currentColor = '#000000';
let brushSize = 5;
let lastX = 0;
let lastY = 0;

// Function to update the brush size
function updateBrushSize() {
  brushSize = parseInt(brushSizeSlider.value, 10);
}

// Function to start drawing
function startDrawing(e: MouseEvent) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

// Function to stop drawing
function stopDrawing() {
  isDrawing = false;
}

// Function to draw
function draw(e: MouseEvent) {
  if (!isDrawing) return; // If not drawing, exit the function

  ctx.strokeStyle = currentColor;
  ctx.lineWidth = brushSize;
  ctx.lineCap = 'round'; // Make the line ends round

  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

// Event listeners for the canvas
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
canvas.addEventListener('mousemove', draw);

// Event listener for color changes
colorPicker.addEventListener('change', () => {
  currentColor = colorPicker.value;
});

// Event listener for brush size changes
brushSizeSlider.addEventListener('input', updateBrushSize);

Let’s break down this code:

  • Getting Elements: We get references to the canvas, color picker, and brush size slider using document.getElementById(). The as HTMLCanvasElement and as HTMLInputElement are type assertions, telling TypeScript the expected type of the elements.
  • Initializing Variables: We declare variables to track whether the user is drawing (isDrawing), the current color (currentColor), the brush size (brushSize), and the last known mouse position (lastX, lastY).
  • updateBrushSize(): This function is called when the brush size slider’s value changes. It parses the slider’s value (which is a string) to an integer and updates the brushSize variable.
  • startDrawing(e: MouseEvent): This function is called when the user presses the mouse button on the canvas. It sets isDrawing to true and updates lastX and lastY to the current mouse position. The e: MouseEvent parameter provides information about the mouse event.
  • stopDrawing(): This function is called when the user releases the mouse button or moves the mouse outside the canvas. It sets isDrawing to false.
  • draw(e: MouseEvent): This function is the core of the drawing logic. It’s called whenever the mouse moves while the mouse button is pressed. It checks if isDrawing is true. If not, it exits. If it is, it sets the stroke style (color), line width (brush size), and line cap (round). It then uses the canvas 2D context to draw a line from the last mouse position to the current mouse position. Finally, it updates lastX and lastY to the current mouse position.
  • Event Listeners: We attach event listeners to the canvas, color picker, and brush size slider to handle user interactions. Specifically, we listen for mousedown, mouseup, mouseout, and mousemove events on the canvas, and change and input events on the color picker and brush size slider, respectively.

Compiling and Running the App

Now that we’ve written our TypeScript code and created the HTML, we need to compile the TypeScript code into JavaScript and run the application.

  1. Compile the TypeScript: Open your terminal in the project directory and run the following command: 
    tsc

    This command uses the TypeScript compiler (tsc) to compile src/index.ts into dist/index.js. If you have configured an outDir in your tsconfig.json file, the output will be placed in that directory.

  2. Open index.html in your browser: You can simply open the index.html file in your web browser. Alternatively, you can use a simple HTTP server (e.g., using Python’s http.server, or a VS Code extension like Live Server) to serve the file and see the changes automatically as you edit the code.

You should now be able to draw on the canvas by clicking and dragging your mouse. You should also be able to change the color and brush size using the UI elements.

Adding More Features

This is a basic drawing app. Here are some ideas for extending its functionality:

  • Different shapes: Implement functions to draw rectangles, circles, and other shapes.
  • Eraser tool: Add an eraser tool that sets the drawing color to the background color.
  • Clear canvas button: Add a button to clear the entire canvas.
  • Save/Load functionality: Allow users to save their drawings as images and load them back into the app.
  • More UI controls: Add more UI controls, like a color palette or a brush style selector (e.g., solid, dashed).
  • Undo/Redo: Implement undo and redo functionality to allow users to revert or reapply their actions. This can be achieved by storing the state of the canvas in an array.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect element selection: Make sure you are selecting the correct HTML elements using document.getElementById(). Double-check your element IDs in the HTML.
  • Context not initialized: Ensure you’ve correctly gotten the 2D rendering context of the canvas using canvas.getContext('2d'). Also, make sure the canvas element is in the HTML.
  • Typo in event names: Event names (e.g., mousedown, mouseup, mousemove) are case-sensitive.
  • Incorrect type assertions: Ensure you are using the correct type assertions when getting elements, such as as HTMLCanvasElement and as HTMLInputElement.
  • Not handling the ‘mouseout’ event properly: The mouseout event is crucial to ensure that drawing stops when the mouse leaves the canvas.
  • Incorrect file paths: Double-check the file paths in your HTML (e.g., the path to your compiled JavaScript file).
  • Forgetting to call beginPath(): The beginPath() method is essential before drawing each new shape or line.

Key Takeaways

  • TypeScript provides static typing: This helps catch errors early and improves code maintainability.
  • The HTML canvas element is powerful: It allows for dynamic graphics creation.
  • Event handling is crucial for interactivity: Understanding how to respond to user input is key.
  • Object-oriented principles can improve code organization: While we didn’t use classes in this basic example, using classes would be beneficial in more complex drawing applications.

FAQ

  1. Why use TypeScript instead of JavaScript? TypeScript offers static typing, which helps catch errors during development, improves code readability, and makes refactoring easier. It also provides better autocompletion and code suggestions in your code editor.
  2. How can I add different brush styles (e.g., dashed lines)? You can set the ctx.lineDash property to an array of numbers that specify the dash and gap lengths. For example, ctx.setLineDash([5, 15]) will create a dashed line with a 5-pixel dash and a 15-pixel gap.
  3. How can I add an eraser tool? You can implement an eraser tool by setting the ctx.strokeStyle to the background color of the canvas.
  4. How do I clear the canvas? You can use the ctx.clearRect(0, 0, canvas.width, canvas.height) method to clear the entire canvas.

Building a drawing app is a great project for learning and practicing web development skills. As you continue to experiment and add more features, you’ll gain a deeper understanding of TypeScript, the HTML canvas, and the principles of interactive web applications. You can use this foundation to build more complex and feature-rich drawing tools.

More posts