TypeScript Tutorial: Building a Simple Web-Based Drawing App

Written by

learnmodernjavascript

in

In the world of web development, creating interactive and engaging user experiences is key. One way to achieve this is by building applications that allow users to interact directly with the content. Imagine a simple drawing application where users can pick colors, select brush sizes, and create their own digital artwork directly in their browser. This tutorial will guide you through building such an application using TypeScript, a powerful superset of JavaScript that adds static typing to your code, making it more robust and easier to maintain.

Why TypeScript?

Before we dive in, let’s discuss why TypeScript is a great choice for this project. TypeScript offers several benefits over plain JavaScript:

  • Type Safety: TypeScript allows you to define the types of your variables, function parameters, and return values. This helps catch errors early in the development process, preventing unexpected behavior and making debugging easier.
  • Code Completion and Refactoring: TypeScript provides excellent support for code completion and refactoring in modern IDEs. This speeds up development and helps you write cleaner code.
  • Improved Maintainability: With TypeScript, your code becomes more readable and easier to understand, especially in larger projects. This makes it easier for other developers (or your future self) to maintain and extend your application.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing you to write modern and efficient code.

Project Setup

Let’s get started by setting up our project. We’ll use npm (Node Package Manager) to manage our dependencies and TypeScript to transpile our code. Make sure you have Node.js and npm installed on your system.

  1. Create a Project Directory: Create a new directory for your project and navigate into it using your terminal.
  2. Initialize npm: Run the following command to initialize an npm project: 
    npm init -y

    This will create a package.json file in your project directory.

  3. Install TypeScript: Install TypeScript as a development dependency: 
    npm install --save-dev typescript
  4. Create a TypeScript Configuration File: Create a tsconfig.json file in your project directory. This file tells the TypeScript compiler how to compile your code. You can generate a basic configuration file using the following command: 
    npx tsc --init

    This will create a tsconfig.json file with default settings. You can customize these settings as needed. For this project, you might want to adjust the following settings:

    • "target": "es5": Specifies the JavaScript language version for the emitted JavaScript code.
    • "module": "commonjs": Specifies the module system to use.
    • "outDir": "./dist": Specifies the output directory for the compiled JavaScript files.
    • "sourceMap": true: Generates source map files for debugging.
  5. Create Project Folders: Create an src folder for your TypeScript source files and a dist folder which will hold the compiled JavaScript files.

HTML Structure

Let’s create the basic HTML structure for our drawing application. Create an index.html file in your project directory (or in a public folder, depending on your setup) and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Drawing App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <canvas id="drawingCanvas"></canvas>
        <div class="controls">
            <input type="color" id="colorPicker" value="#000000">
            <input type="range" id="brushSize" min="1" max="20" value="5">
        </div>
    </div>
    <script src="dist/app.js"></script>
</body>
</html>

This HTML sets up the basic layout:

  • A <canvas> element with the id “drawingCanvas” where the drawing will take place.
  • A color picker (<input type="color">) to select the drawing color.
  • A brush size slider (<input type="range">) to control the brush size.
  • A style.css file for styling.
  • A link to the compiled JavaScript file (app.js) in the dist directory.

CSS Styling

Create a style.css file in your project directory and add some basic styling to make the app look presentable:

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

canvas {
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.controls {
    display: flex;
    align-items: center;
}

input[type="color"] {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="range"] {
    width: 150px;
}

TypeScript Code

Now, let’s write the TypeScript code that will handle the drawing logic. Create an app.ts file in your src directory and add the following code:


const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;
const brushSizeSlider = document.getElementById('brushSize') as HTMLInputElement;

if (!canvas || !colorPicker || !brushSizeSlider) {
    throw new Error('Could not initialize the application. Check your HTML.');
}

const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

canvas.width = 600;
canvas.height = 400;

let isDrawing = false;
let currentColor = colorPicker.value;
let brushSize = parseInt(brushSizeSlider.value, 10);

colorPicker.addEventListener('change', () => {
    currentColor = colorPicker.value;
});

brushSizeSlider.addEventListener('input', () => {
    brushSize = parseInt(brushSizeSlider.value, 10);
});

const startDrawing = (e: MouseEvent) => {
    isDrawing = true;
    draw(e);
};

const stopDrawing = () => {
    isDrawing = false;
    ctx.beginPath(); // Start a new path when drawing stops.
};

const draw = (e: MouseEvent) => {
    if (!isDrawing) return;

    const x = e.offsetX;
    const y = e.offsetY;

    ctx.lineWidth = brushSize;
    ctx.lineCap = 'round';
    ctx.strokeStyle = currentColor;

    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath(); // Start a new path for each segment
    ctx.moveTo(x, y);
};

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

Let’s break down this code:

  • Get DOM Elements: We retrieve the <canvas>, color picker, and brush size slider elements from the HTML using their IDs. We use the as HTMLCanvasElement, as HTMLInputElement type assertions to tell TypeScript the specific types of these elements.
  • Error Handling: We check if the elements were successfully retrieved. If any of them are null, it means there’s a problem with the HTML, and we throw an error to help with debugging.
  • Get the Canvas Context: We get the 2D rendering context from the canvas element. This context is used to draw on the canvas.
  • Set Canvas Dimensions: We set the width and height of the canvas.
  • Initialize Variables: We initialize variables to track whether the user is drawing (isDrawing), the current color (currentColor), and the brush size (brushSize).
  • Event Listeners for Controls: We add event listeners to the color picker and brush size slider to update the currentColor and brushSize variables whenever the user changes them.
  • Drawing Functions (startDrawing, stopDrawing, draw):
    • startDrawing: Sets isDrawing to true and calls the draw function to start drawing.
    • stopDrawing: Sets isDrawing to false and calls beginPath() to stop the current path.
    • draw: This function is the core of the drawing logic. It checks if the user is drawing (isDrawing). If so, it gets the mouse coordinates (x, y), sets the line width, line cap, and stroke style, and then draws a line segment from the last point to the current mouse position. The `beginPath()` and `moveTo()` are crucial for drawing individual segments.
  • Event Listeners for Canvas: We add event listeners to the canvas to handle mouse events:
    • mousedown: Calls startDrawing when the mouse button is pressed.
    • mouseup and mouseout: Calls stopDrawing when the mouse button is released or the mouse leaves the canvas.
    • mousemove: Calls draw when the mouse is moved while the button is pressed.

Compiling and Running the Application

To compile your TypeScript code, run the following command in your terminal:

tsc

This will transpile your app.ts file into a app.js file in the dist directory. If you configured source maps, you’ll also get a app.js.map file, which is helpful for debugging.

Finally, open the index.html file in your web browser. You should now be able to draw on the canvas using your mouse! You can change the color using the color picker and adjust the brush size using the slider.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners might encounter and how to fix them:

  • Incorrect Element Selection: Make sure you’re selecting the correct HTML elements using document.getElementById(). Double-check the IDs in your HTML and TypeScript code.
  • Canvas Context Errors: Ensure you’re getting the 2D rendering context correctly using getContext('2d'). If the context is not available (e.g., if the canvas element is not properly initialized), the drawing won’t work.
  • Type Errors: TypeScript will help you catch type errors early on. If you see errors in your IDE or during compilation, carefully review the types of your variables and function parameters. Make sure you’re using the correct types (e.g., HTMLCanvasElement, HTMLInputElement).
  • Incorrect Event Handling: Make sure you’re attaching the event listeners to the correct elements and that your event handler functions are correctly defined.
  • Drawing Logic Issues: The drawing logic can be tricky to get right. Pay close attention to the isDrawing flag and the mouse coordinates. Use beginPath(), moveTo(), and lineTo() correctly to create the desired drawing behavior.
  • CORS Issues: If you’re trying to load external resources (e.g., images) on your canvas, you might encounter CORS (Cross-Origin Resource Sharing) issues. Make sure your server is configured to allow cross-origin requests.

Adding Features (Intermediate Level)

Once you have the basic drawing app working, you can add more advanced features to enhance it. Here are some ideas:

  • Different Brush Styles: Implement different brush styles, such as circles, squares, or custom shapes.
  • Eraser Tool: Add an eraser tool that allows the user to erase parts of the drawing.
  • Fill Tool: Implement a fill tool that allows the user to fill areas of the drawing with a specific color.
  • Saving and Loading Drawings: Add functionality to save the drawing as an image and load it later.
  • Undo/Redo Functionality: Implement undo and redo features to allow the user to revert or reapply changes.
  • Layers: Allow users to create and manage multiple layers for their drawings.
  • Responsive Design: Make the application responsive so that it works well on different screen sizes and devices.

Key Takeaways

  • TypeScript provides type safety and code completion, making it easier to write and maintain web applications.
  • The <canvas> element is a powerful tool for creating interactive graphics in web browsers.
  • Event listeners are essential for handling user interactions, such as mouse clicks and movements.
  • Understanding the 2D rendering context (CanvasRenderingContext2D) is crucial for drawing on the canvas.
  • Break down complex tasks into smaller, manageable functions to improve code organization and readability.

FAQ

  1. What is TypeScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static typing, classes, interfaces, and other features to JavaScript, making it more robust and easier to maintain.
  2. Why use TypeScript for this project? TypeScript helps catch errors early, provides better code completion and refactoring support, and improves code readability.
  3. How do I compile TypeScript code? You can compile TypeScript code using the TypeScript compiler (tsc). This compiles your .ts files into .js files.
  4. What are the key elements of the HTML for this drawing application? The key elements are the <canvas> element for drawing, the color picker (<input type="color">) for selecting colors, and the brush size slider (<input type="range">) for controlling the brush size.
  5. How can I add more features to this app? You can add more features by implementing different brush styles, an eraser tool, a fill tool, saving and loading functionality, undo/redo features, layers, and responsive design.

Building a drawing application with TypeScript is a rewarding experience that combines the power of web technologies with the benefits of a strongly typed language. The process of creating this app, from setting up the project to handling user interactions, offers a practical way to learn and apply fundamental web development concepts. By understanding the core principles of HTML, CSS, and JavaScript, along with the added advantages of TypeScript, you can create interactive and engaging web applications. Remember that practice is key. Experiment with different features, explore advanced concepts, and build upon the foundation you’ve established. With each project, you’ll enhance your skills and deepen your understanding of web development, ultimately empowering you to create more sophisticated and user-friendly applications.

More posts