How to build a dynamic drawing board with JavaScript

Key takeaways:

• A dynamic drawing board lets users draw in real time with touch or mouse inputs, offering options to adjust color, size, and shape of the pencil.

• The drawing board uses an HTML canvas element for drawing and includes features to clear, undo, and save drawings.

• CSS styles the board, making it visually appealing and easier to use, by defining the layout, borders, and navigation controls.

• JavaScript enables the core functionality: drawing on the canvas, switching pencil colors and sizes, and saving work to local storage.

A dynamic drawing board is an interactive canvas that allows drawing using touch inputs or mouse devices in real time. It is also responsive, letting users change the color and size of the pencil and clear the canvas.

Building a dynamic drawing board with JavaScript is quite easy and interesting. Since it’ll be a web-based drawing board, therefore, we’ll use an HTML canvas that has the options to:

• Resize the pencil

• Change the pencil color

• Change the shape of the pencil

• Undo the recent strokes

• Clear the canvas

• Save the drawing into our system

We’ll use CSS to format our drawing board and JavaScript to handle the functionalities. So, our drawing board consists of three files. Let’s see them one by one below:

HTML of the dynamic drawing board

First, we’ll start with the HTML code to define the canvas area, some buttons, and customization controls for our drawing board. The widget below shows the HTML file for our drawing board. Click the “Run” button to execute the code; we see a white area (canvas) and a few buttons at the end of the canvas, which can not perform any action at this stage.

Explanation:

• Line 6: We define the title of the web page.

• Line 10: We define the size of the canvas.

• Lines 12–22: We define the controls and buttons to customize the pencil and clear, save, and undo the changes.

Styling for the dynamic drawing board

We’ve created a frontend of the drawing board, which is very basic and non-attractive. Let’s add some CSS to make the drawing board a bit presentable. We have a CSS file in the widget below that adds some formatting to the drawing board. Click the “Run” button to see the output.

Explanation:

• Line 1: Import “Roboto” font for a modern, clean look.

• Line 4: Apply box-sizing: border-box to all elements for easier layout management.

• Lines 7–16: Center content both horizontally and vertically with a light gray background, filling the viewport.

• Lines 22–25: Add a 2px steel-blue border and bottom margin for separation from controls.

• Lines 27–36: Style toolbox with a steel-blue background, border, and centered layout, with a 10px gap between controls.

• Lines 38–51: Each control button is 40x40px, white, borderless, with rounded corners and a pointer cursor for interactivity.

• Lines 53–56: Set #color wider color picker (50px).

• Lines 58–60: Set #brushShape to 100px for brush shape options.

• Lines 62–65: Make the #size wider and add padding for ease of use.

The widget above’s output shows the canvas border and formatting of the bottom nav bar, but we can’t draw on the canvas, and the buttons don’t work.

Adding JavaScript to the dynamic drawing board

We have created a frontend of the drawing board and added styling. Now, it’s time to add the backend functionality of the drawing board. We’ll add JavaScript code so that we can draw on the canvas and also perform the other customizations as well. The widget below has a JavaScript file that handles all the logic. Click the “Run” button to see the final version of the drawing board.

Explanation:

• Lines 1–9: The main elements like canvas, control buttons (increaseBtn, decreaseBtn, clearEl, etc.), and customization options (colorEl, brushShapeEl) are selected from the HTML.

• Line 11: The 2D drawing context is created for canvas, allowing drawing operations.

• Lines 23–28: mousedown starts drawing, saves the initial position, and records the canvas state.

• Lines 23–28: mouseup stops drawing.

• Lines 36–44: mousemove continuously draws lines between points if the drawing is active.

• Lines 46–53: draw() selects brush shape (circle or square) and draws a line between points.

• Lines 55–67: drawCircle and drawSquare change the pencil shape to a circle and square, respectively.

• Lines 69–76: drawLine draws a line with color and thickness based on brush size.

• Lines 119–121: saveState() saves the current canvas for undoing.

• Lines 123–127: restoreState() loads the last saved state from history.

The widget above’s output is a fully dynamic drawing board that lets us draw in different colors and sizes and save the work in our local storage.

Conclusion

In this Answer, we learned how to create a simple drawing board using HTML, CSS, and JavaScript step-by-step. This can be a starting point to build an interactive drawing board with more functionalities and practice the function calling, event, and state handling in JavaScript.