TypeScript Tutorial: Creating a Simple Web-Based Drawing Application

Written by

learnmodernjavascript

in

In the digital age, the ability to create and manipulate visual content is more important than ever. From simple sketches to complex diagrams, drawing applications are essential tools for a wide range of users. This tutorial will guide you through building a simple, yet functional, web-based drawing application using TypeScript. You’ll learn how to handle user input, draw shapes, and implement basic features, all while leveraging the power and safety of TypeScript.

Why TypeScript for a Drawing App?

While JavaScript is perfectly capable of building web applications, TypeScript offers significant advantages, especially for projects of any complexity. Here’s why TypeScript is a great choice for our drawing application:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process. This reduces the likelihood of runtime bugs and makes debugging much easier.
  • Code Maintainability: With TypeScript, your code becomes more readable and maintainable. Type annotations act as documentation, making it easier to understand the purpose of variables and functions.
  • Improved Developer Experience: Modern IDEs provide excellent support for TypeScript, including autocompletion, refactoring, and error checking, leading to a more productive development workflow.
  • Object-Oriented Programming (OOP) Features: TypeScript supports OOP principles like classes, interfaces, and inheritance, which help organize and structure your code, especially as your application grows.

Setting Up the Project

Before we start coding, let’s set up our project. We’ll use npm (Node Package Manager) to initialize our project and install the necessary dependencies.

  1. Create a Project Directory: Create a new directory for your project and navigate into it using your terminal.
  2. Initialize npm: Run npm init -y to create a package.json file.
  3. Install TypeScript: Run npm install typescript --save-dev to install TypeScript as a development dependency.
  4. Create a tsconfig.json file: Run npx tsc --init. This command generates a tsconfig.json file, which configures the TypeScript compiler. You can customize this file based on your project’s needs. For this tutorial, we will use the default configuration.
  5. Create the HTML file: Create an index.html file with the following basic structure:
<!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>
    <style>
        #drawingCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="600" height="400"></canvas>
    <script src="./dist/main.js"></script>
</body>
</html>

This HTML file includes a <canvas> element, which we will use to draw on. It also includes a basic style for the canvas and references a JavaScript file (main.js) that will contain our drawing logic. Note that we link to dist/main.js. We will configure TypeScript to compile our code into this directory.

Writing the TypeScript Code

Now, let’s create our main TypeScript file, usually named main.ts, and place it in a src directory. We’ll start with the basics: setting up the canvas and handling mouse events.

1. Setting up the Canvas

First, we need to get a reference to the canvas element and its 2D rendering context. The context provides the methods we’ll use to draw shapes.

// src/main.ts
const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

if (!ctx) {
    console.error('Could not get 2D context');
}

In this code:

  • We use document.getElementById('drawingCanvas') to get the canvas element. The as HTMLCanvasElement part is a type assertion, telling TypeScript that we know this element is a canvas.
  • We get the 2D rendering context using canvas.getContext('2d'). The ! is a non-null assertion operator, which tells TypeScript that we are sure the result will not be null.
  • We include a check to make sure the context was successfully retrieved.

2. Handling Mouse Events

Next, we need to handle mouse events to allow the user to draw on the canvas. We’ll listen for mousedown, mousemove, and mouseup events.

let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e: MouseEvent) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
    isDrawing = false;
});

canvas.addEventListener('mousemove', (e: MouseEvent) => {
    if (!isDrawing) return;

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

Here’s what this code does:

  • We declare three variables: isDrawing (a boolean to track whether the mouse button is pressed), lastX, and lastY (to store the coordinates of the last mouse position).
  • On mousedown, we set isDrawing to true and update lastX and lastY to the current mouse position (e.offsetX and e.offsetY represent the mouse position relative to the canvas).
  • On mouseup and mouseout, we set isDrawing to false.
  • On mousemove, if isDrawing is true, we start a new path (ctx.beginPath()), move to the last mouse position (ctx.moveTo(lastX, lastY)), draw a line to the current mouse position (ctx.lineTo(e.offsetX, e.offsetY)), and stroke the line (ctx.stroke()). We then update lastX and lastY.

3. Compiling and Running

To compile the TypeScript code, run npx tsc in your terminal. This will create a main.js file in a dist directory (or wherever you configured the output in tsconfig.json). Open index.html in your browser. You should now be able to draw on the canvas by clicking and dragging your mouse.

Adding Features

Now that we have the basic drawing functionality, let’s add some features to make our application more useful.

1. Color Picker

Let’s add a color picker so the user can change the drawing color. We’ll add a <input type="color"> element to our HTML and update the drawing color in our TypeScript code.

  1. Add the color picker to index.html:
<!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>
    <style>
        #drawingCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="600" height="400"></canvas>
    <input type="color" id="colorPicker" value="#000000">
    <script src="./dist/main.js"></script>
</body>
</html>
  1. Add the color picker functionality in main.ts:
// src/main.ts
const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;

let isDrawing = false;
let lastX = 0;
let lastY = 0;

// Set default color
ctx.strokeStyle = colorPicker.value;

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

canvas.addEventListener('mousedown', (e: MouseEvent) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
    isDrawing = false;
});

canvas.addEventListener('mousemove', (e: MouseEvent) => {
    if (!isDrawing) return;

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

In this code:

  • We get a reference to the color picker element.
  • We set the initial strokeStyle of the canvas context to the color picker’s value.
  • We add an event listener to the color picker’s change event. When the user changes the color, we update the strokeStyle.

2. Line Thickness Control

Let’s add a way for the user to control the thickness of the lines they draw. We’ll add a <input type="range"> element to our HTML and update the line width in our TypeScript code.

  1. Add the line thickness control to index.html:
<!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>
    <style>
        #drawingCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="600" height="400"></canvas>
    <input type="color" id="colorPicker" value="#000000">
    <input type="range" id="lineWidth" min="1" max="10" value="2">
    <script src="./dist/main.js"></script>
</body>
</html>
  1. Add the line thickness control functionality in main.ts:
// src/main.ts
const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;
const lineWidthInput = document.getElementById('lineWidth') as HTMLInputElement;

let isDrawing = false;
let lastX = 0;
let lastY = 0;

// Set default color and line width
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = parseInt(lineWidthInput.value, 10);

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

llineWidthInput.addEventListener('change', () => {
    ctx.lineWidth = parseInt(lineWidthInput.value, 10);
});

canvas.addEventListener('mousedown', (e: MouseEvent) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
    isDrawing = false;
});

canvas.addEventListener('mousemove', (e: MouseEvent) => {
    if (!isDrawing) return;

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

In this code:

  • We get a reference to the line width input element.
  • We set the initial lineWidth of the canvas context to the input’s value. We use parseInt() to convert the input value (which is a string) to a number.
  • We add an event listener to the line width input’s change event. When the user changes the line width, we update the lineWidth.

3. Clear Canvas Button

Finally, let’s add a button to clear the canvas. This is a common feature in drawing applications.

  1. Add the clear button to index.html:
<!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>
    <style>
        #drawingCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="600" height="400"></canvas>
    <input type="color" id="colorPicker" value="#000000">
    <input type="range" id="lineWidth" min="1" max="10" value="2">
    <button id="clearButton">Clear</button>
    <script src="./dist/main.js"></script>
</body>
</html>
  1. Add the clear button functionality in main.ts:
// src/main.ts
const canvas = document.getElementById('drawingCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const colorPicker = document.getElementById('colorPicker') as HTMLInputElement;
const lineWidthInput = document.getElementById('lineWidth') as HTMLInputElement;
const clearButton = document.getElementById('clearButton') as HTMLButtonElement;

let isDrawing = false;
let lastX = 0;
let lastY = 0;

// Set default color and line width
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = parseInt(lineWidthInput.value, 10);

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

llineWidthInput.addEventListener('change', () => {
    ctx.lineWidth = parseInt(lineWidthInput.value, 10);
});

clearButton.addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

canvas.addEventListener('mousedown', (e: MouseEvent) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

canvas.addEventListener('mouseout', () => {
    isDrawing = false;
});

canvas.addEventListener('mousemove', (e: MouseEvent) => {
    if (!isDrawing) return;

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

In this code:

  • We get a reference to the clear button element.
  • We add an event listener to the button’s click event. When the button is clicked, we call ctx.clearRect(0, 0, canvas.width, canvas.height) to clear the entire canvas.

Advanced Features (Optional)

Once you have the basic functionality, you can expand your drawing application with more advanced features. Here are some ideas:

  • Shape Drawing: Add functionality to draw shapes like rectangles, circles, and triangles.
  • Fill Tool: Implement a fill tool to fill enclosed areas with a chosen color.
  • Eraser Tool: Create an eraser tool that allows the user to erase parts of their drawing.
  • Undo/Redo: Implement undo and redo functionality to allow users to revert or reapply their actions. This usually involves storing the state of the canvas and using a stack-based approach.
  • Saving and Loading: Allow users to save their drawings as images and load them back into the application.

Common Mistakes and How to Fix Them

When building a drawing application, you might encounter some common issues. Here’s a look at some of them and how to resolve them:

  • Incorrect Canvas Size: If your canvas appears too small or is not the size you expect, double-check the width and height attributes in your HTML’s <canvas> tag.
  • Drawing Doesn’t Appear: If you’re not seeing anything drawn, make sure you’ve called the stroke() method after defining your path with moveTo() and lineTo(). Also, verify that the strokeStyle is set to a valid color.
  • Line Breaks or Jagged Lines: If your lines appear to have breaks or are not smooth, try setting the lineCap property of the context to 'round' or 'square'. Also ensure that you’re correctly updating lastX and lastY in the mousemove event.
  • Event Listener Issues: Make sure your event listeners are correctly attached to the canvas element. Check for typos in the event names (e.g., mousedown instead of mouseDown). Also, ensure that the event listeners are not being inadvertently removed.
  • Type Errors: TypeScript can help identify type errors during development. Always check the console for any type-related errors and make sure your code adheres to the defined types.

Summary / Key Takeaways

In this tutorial, we’ve walked through the process of building a simple web-based drawing application using TypeScript. We covered the basics of setting up the project, handling mouse events, and adding essential features like a color picker, line thickness control, and a clear canvas button. You’ve learned how TypeScript can enhance your development process by providing type safety and improved code maintainability. Remember to use the provided code snippets as a starting point and experiment with adding more features to customize your application. By understanding the fundamentals and utilizing the power of TypeScript, you can create interactive and engaging web applications.

FAQ

  1. Can I use this drawing application on mobile devices?
    Yes, the drawing application should work on mobile devices. However, you might need to adjust the touch event handling to support touch input. You can replace the mouse event listeners with touch event listeners (e.g., touchstart, touchmove, touchend).
  2. How can I improve the performance of the drawing application?
    For performance improvements, consider these tips:

    • Optimize the drawing logic: Avoid unnecessary calculations and operations inside the mousemove event handler.
    • Use requestAnimationFrame: Use requestAnimationFrame to update the canvas rendering.
    • Limit the number of points: Reduce the number of points drawn to the canvas.
  3. How can I add different drawing tools like rectangles or circles?
    To add different drawing tools, you’ll need to add user interface elements (e.g., buttons) to select the desired tool. When a tool is selected, you’ll modify the mousemove event handler to draw the selected shape instead of a line. For example, if the rectangle tool is selected, you’ll record the starting coordinates on mousedown and draw a rectangle from the start point to the current mouse position on mousemove.
  4. How do I save the drawing as an image?
    You can save the drawing as an image by using the toDataURL() method of the canvas element to get a data URL of the image. You can then create an <a> element to download the image. Here’s a simple example:

    const saveButton = document.createElement('button');
saveButton.textContent = 'Save';
document.body.appendChild(saveButton);

saveButton.addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = 'drawing.png';
    a.click();
});

Building this simple drawing application is more than just a coding exercise; it’s a gateway to understanding how web applications interact with user input and manipulate visual elements. The principles you’ve learned here—handling events, managing the canvas, and using TypeScript for enhanced code quality—are transferable to a wide range of web development projects. As you continue to explore and expand this application, you’ll discover the power and flexibility of front-end development, paving the way for more complex and creative projects.

More posts