Create a Drawing Board Web App with HTML5 Canvas

Introduction

In this project, we will create a simple web-based drawing board application step by step. Each step will build upon the previous one, allowing you to gradually add functionality to the application. By the end of this project, you will have a fully functional drawing board where users can draw, change brush color, adjust brush size, and clear the canvas.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up the HTML structure for a drawing board web application.
How to create and obtain the 2D rendering context of an HTML <canvas> element.
How to implement event listeners to track mouse actions for drawing.
How to add a "Clear" button and implement the functionality to clear the canvas.
How to create a color picker input and implement the functionality to change the brush color.
How to add a range input for adjusting the brush size and implement the functionality.

🏆 Achievements

After completing this project, you will be able to:

Create a basic web page structure using HTML.
Use JavaScript event listeners to handle user interactions.
Work with HTML <canvas> elements for drawing.
Style a web application using CSS.
Combine HTML, CSS, and JavaScript to build a functional drawing board.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/CSSPreprocessorsGroup -.-> css/nesting("`Nesting`") html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/viewport("`Viewport Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("`Browser Object Model`") subgraph Lab Skills css/selectors -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/colors -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/fonts -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/text_styling -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/box_model -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/margin_and_padding -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/borders -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/width_and_height -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/display_property -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/flexbox -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/backgrounds -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/transitions -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/nesting -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/basic_elems -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/charset -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/lang_decl -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/viewport -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/head_elems -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/text_head -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/layout -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/doc_flow -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/multimedia -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} html/forms -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} css/pseudo_classes -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/variables -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/data_types -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/arith_ops -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/comp_ops -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/cond_stmts -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/loops -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/functions -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/obj_manip -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/dom_select -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/event_handle -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} javascript/bom -.-> lab-298964{{"`Creating a Drawing Board Web App`"}} end

Create the HTML Structure

Requirements:

Open the index.html file.
Set up the basic HTML structure in index.html with a canvas, header, and control elements.

Functionality:

The project files and basic HTML structure will be created, but there will be no drawing functionality yet.

Steps:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Drawing Board</title>
  </head>
  <body>
    <header>
      <h1>Drawing Board</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Brush Size:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Clear</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Adding the Canvas

Requirements:

In index.html, add a <canvas> element with an ID of "whiteboard" and dimensions (width and height) of your choice.

Functionality:

The canvas will be added to the web page, but it won't have any drawing capabilities.

Steps:

<body>
  <header>
    <h1>Drawing Board</h1>
  </header>
  <div class="container">
    <!--add canvas-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Brush Size:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Clear</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Adding Drawing Functionality

Requirements:

In script.js, add JavaScript code to enable drawing on the canvas when the mouse is clicked and moved.
Implement event listeners for mousedown, mouseup, and mousemove events.

Functionality:

Users can now draw on the canvas using the mouse.

Steps:

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

This code enables drawing on the canvas when the mouse is clicked and moved.

Adding Clear Functionality

Requirements:

In script.js, add JavaScript code to clear the canvas when a "Clear" button is clicked.
Create a button in index.html with an ID of "clear-btn."

Functionality:

Users can clear the canvas to start a new drawing.

Steps:

const clearButton = document.getElementById("clear-btn");

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

This code allows users to clear the canvas by clicking the "Clear" button.

Adding Brush Color Control

Requirements:

In script.js, add JavaScript code to allow users to select a brush color using an <input type="color"> element.
Create the color picker input in index.html with an ID of "color-picker."

Functionality:

Users can choose a color for their brush.

Steps:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

This code allows users to select a brush color using the color picker.

Adding Brush Size Control

Requirements:

In script.js, add JavaScript code to allow users to adjust the brush size using an <input type="range"> element.
Create the range input in index.html with an ID of "brush-size."

Functionality:

Users can change the brush size to make thicker or thinner strokes.

Steps:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

This code allows the user to adjust the brush size using the range input.

CSS Styling

Requirements:

Open the styles.css file.
Add CSS styles to make the web app visually appealing.

Functionality:

Apply basic styles to the web app elements.

Steps:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

Running the App

Open index.html in a web browser.
Test the application by adding expenses and verifying that the expense list and summary update correctly.
The effect of the page is as follows:

Summary

Congratulations! You've created a simple drawing board web application using HTML, CSS, and JavaScript. Users can draw on the canvas, change the brush color, and adjust the brush size.

Creating a Drawing Board Web App

Introduction

👀 Preview

🎯 Tasks

🏆 Achievements

Skills Graph

Create the HTML Structure

Adding the Canvas

Adding Drawing Functionality

Adding Clear Functionality

Adding Brush Color Control

Adding Brush Size Control

CSS Styling

Running the App

Summary

Other JavaScript Tutorials you may like