TypeScript Tutorial: Building a Simple Interactive Web-Based Drawing App

Written by

learnmodernjavascript

in

Ever wanted to create your own digital art or simply sketch ideas without the hassle of installing complex software? In this tutorial, we’ll dive into TypeScript and build a straightforward, interactive web-based drawing application. You’ll learn the fundamentals of canvas manipulation, event handling, and how to create a responsive and user-friendly drawing experience. This project is perfect for beginners and intermediate developers looking to expand their web development skillset.

Why Build a Drawing App?

Building a drawing app offers a practical way to learn and apply fundamental web development concepts. It allows you to:

  • Master Canvas Manipulation: Learn how to draw shapes, lines, and manipulate pixels directly on the HTML canvas element.
  • Understand Event Handling: Get hands-on experience with mouse and touch events to capture user input and translate it into drawing actions.
  • Practice TypeScript Fundamentals: Reinforce your understanding of types, classes, interfaces, and other core TypeScript features.
  • Create a User-Friendly Interface: Design an intuitive interface to control drawing tools, colors, and line widths.
  • Build a Practical Project: Create something you can use and share, showcasing your skills.

This tutorial will guide you step-by-step, ensuring you grasp the concepts and build a functional drawing application.

Setting Up Your Development Environment

Before we start coding, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (or yarn): For managing dependencies and running the TypeScript compiler. Download and install Node.js from nodejs.org.
  • A Code Editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.). VS Code is highly recommended due to its excellent TypeScript support.
  • TypeScript Compiler: Install the TypeScript compiler globally or locally in your project. We’ll use the local approach for this tutorial.

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

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

Now, install TypeScript as a development dependency:

npm install typescript --save-dev

Next, create a tsconfig.json file to configure the TypeScript compiler. In your project directory, run:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize these settings to fit your project’s needs. For our project, we’ll make a few modifications. Open tsconfig.json and ensure the following settings are present (or set to these values):

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s a breakdown of the important options:

  • target: Specifies the JavaScript version to compile to (es5 is widely compatible).
  • module: Specifies the module system (commonjs is suitable for Node.js environments).
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • strict: Enables strict type-checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • include: Specifies the files to include in the compilation.

Creating the HTML Structure

Let’s create the basic HTML structure for our drawing app. Create an index.html file in the root directory of your project with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing App</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #canvas {
            border: 1px solid #000;
            background-color: white;
        }
        .controls {
            margin-top: 20px;
        }
        button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <div class="controls">
        <button id="clearButton">Clear</button>
        <input type="color" id="colorPicker" value="#000000">
        <input type="range" id="lineWidth" min="1" max="10" value="2">
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic layout:

  • A <canvas> element with an ID of “canvas” where we’ll draw.
  • A “Clear” button to clear the canvas.
  • A color picker to select the drawing color.
  • A line width slider to control the thickness of the lines.
  • A basic CSS styling.
  • A link to our JavaScript file (dist/index.js), which we’ll create later.

Writing the TypeScript Code

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

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

// Get the clear button, color picker, and line width input
const clearButton = document.getElementById('clearButton') as HTMLButtonElement;
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;
const lineWidthInput = document.getElementById('lineWidth') as HTMLInputElement;

// Initialize drawing state
let isDrawing = false;
let currentColor = '#000000';
let currentLineWidth = 2;

// Function to start drawing
const startDrawing = (e: MouseEvent | TouchEvent) => {
    isDrawing = true;
    draw(e);
};

// Function to draw lines
const draw = (e: MouseEvent | TouchEvent) => {
    if (!isDrawing) return;

    let x: number, y: number;

    // Handle mouse and touch events
    if (e instanceof MouseEvent) {
        x = e.offsetX;
        y = e.offsetY;
    } else {
        x = e.touches[0].clientX - canvas.offsetLeft;
        y = e.touches[0].clientY - canvas.offsetTop;
    }

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

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

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

// Function to clear the canvas
const clearCanvas = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
};

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

// Event listeners for touch events (for touch devices)
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchend', stopDrawing);
canvas.addEventListener('touchcancel', stopDrawing);
canvas.addEventListener('touchmove', draw);

// Event listener for the clear button
clearButton.addEventListener('click', clearCanvas);

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

// Event listener for line width changes
llineWidthInput.addEventListener('input', () => {
    currentLineWidth = parseInt(lineWidthInput.value, 10);
});

Let’s break down the code:

  • Get Canvas and Context: We retrieve the <canvas> element and its 2D rendering context. The context is what allows us to draw on the canvas.
  • Get UI Elements: We retrieve the clear button, color picker, and line width input elements.
  • Initialize Drawing State: We declare variables to track whether the user is drawing (isDrawing), the current color (currentColor), and the current line width (currentLineWidth).
  • Start Drawing Function (startDrawing): This function is triggered when the user starts drawing (mousedown or touchstart). It sets isDrawing to true and calls the draw function.
  • Draw Function (draw): This function is called when the user is drawing (mousemove or touchmove). It checks if isDrawing is true. If it is, it draws a line from the previous mouse/touch position to the current position.
  • Stop Drawing Function (stopDrawing): This function is triggered when the user stops drawing (mouseup, mouseout, touchend, or touchcancel). It sets isDrawing to false and calls beginPath() to ensure a new path on the next draw.
  • Clear Canvas Function (clearCanvas): This function clears the entire canvas.
  • Event Listeners: We add event listeners to the canvas for mouse and touch events (mousedown, mouseup, mousemove, touchstart, touchend, touchmove, touchcancel) to handle drawing. We also add event listeners to the clear button, color picker, and line width input to update the drawing settings.
  • Color and Line Width Updates: We update the currentColor and currentLineWidth variables based on user input from the color picker and line width input.

Compiling and Running the Application

Now that we have our TypeScript code and HTML structure, let’s compile the TypeScript code into JavaScript and run the application.

1. Compile the TypeScript code: Open your terminal and navigate to your project directory. Run the following command:

npx tsc

This command will compile the src/index.ts file and create a dist/index.js file.

2. Open the HTML file in your browser: Open the index.html file in your web browser. You should see a blank canvas, a clear button, a color picker, and a line width slider.

3. Test the application: Try drawing on the canvas by clicking and dragging your mouse (or using your finger on a touch screen). Experiment with different colors and line widths. Click the “Clear” button to clear the canvas.

Adding More Features (Optional)

Once you’ve got the basic drawing app working, you can expand its functionality. Here are some ideas:

  • Different Brush Styles: Implement different brush styles (e.g., circles, squares).
  • Eraser Tool: Add an eraser tool that sets the drawing color to the background color.
  • Save/Load Functionality: Allow users to save their drawings as images and load them back into the app.
  • Shape Tools: Implement tools for drawing shapes like rectangles, circles, and lines.
  • Undo/Redo Functionality: Allow users to undo and redo their drawing actions.
  • Importing Images: Allow users to import images onto the canvas to draw on top of them.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Canvas Not Displaying: Double-check that your <canvas> element has a width and height attribute. Also, make sure that the canvas style is not hiding the element (e.g., using display: none;).
  • Drawing Not Working: Ensure that your event listeners are correctly attached to the canvas element and that the isDrawing flag is being set and unset correctly. Verify that the ctx.beginPath() is being called before drawing new lines.
  • Incorrect Coordinates: Make sure you are using the correct coordinates (e.offsetX and e.offsetY for mouse events, and e.touches[0].clientX - canvas.offsetLeft and e.touches[0].clientY - canvas.offsetTop for touch events).
  • TypeScript Compilation Errors: Review your tsconfig.json file to ensure the compiler options are set correctly. Check for type errors in your TypeScript code. Also, make sure that you’ve installed all the necessary dependencies.
  • Touch Events Not Working: Ensure you’ve added event listeners for both mouse and touch events. Check that your browser supports touch events. Make sure your touch event handling is correctly calculating the touch coordinates relative to the canvas.

Key Takeaways and Summary

In this tutorial, you’ve learned how to build a simple, interactive web-based drawing application using TypeScript. You’ve gained experience with:

  • Setting up a TypeScript development environment.
  • Manipulating the HTML <canvas> element.
  • Handling mouse and touch events.
  • Using the 2D rendering context to draw lines.
  • Creating a basic user interface with controls.

This project provides a solid foundation for understanding web-based drawing and graphics. You can build upon this foundation to create more complex and feature-rich drawing applications. Remember to experiment with different features and explore the vast possibilities of the HTML canvas.

FAQ

  1. Can I use this app on mobile devices? Yes, the app is designed to work on both desktop and mobile devices, thanks to the inclusion of touch event listeners.
  2. How can I change the background color of the canvas? You can change the background color of the canvas by setting the fillStyle property of the ctx object and then calling fillRect(). For example, to set the background to white, add the following code inside the start of your startDrawing function: 
    ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
  3. How do I add different brush styles? You can add different brush styles by modifying the draw() function to draw different shapes or patterns instead of simple lines. For instance, you could draw circles at each mouse/touch point to create a dot brush.
  4. How can I add an eraser tool? To implement an eraser tool, you can set the strokeStyle of the ctx to the same color as the canvas’s background color when the eraser tool is selected.
  5. How can I save the drawing? You can save the drawing by using the toDataURL() method of the canvas element to get a data URL of the image, which you can then download or send to a server.

Building this drawing application is just the beginning. The skills you’ve acquired—understanding canvas manipulation, event handling, and TypeScript basics—are valuable assets for any web developer. From here, you can explore more advanced features, experiment with different drawing tools, and even integrate your drawing app into larger web projects. The possibilities are endless, and with each line of code, you’re not just building an application; you’re honing your skills and expanding your capabilities.

More posts