Enlight

Learn to code by building projects

Build a Web Paint App

create your own digital whiteboard

Source Demo Start Coding!

Getting Started

Our web paint application is based off of HTML5’s canvas. We’ll be making a “whiteboard” that draws whenever you move your mouse while clicked. We’ll also implement an input box where we can specify what hex color we want. Since our app is basically a plain screen where we can draw, we don’t need to style anything (no CSS file needed). Therefore, we just need two files:

  • index.html - for our markup
  • app.js - for our function(s)

The Markup

Our html will have all the usual tags (head, meta viewport, title, etc) but we do need to add an input tag to let the user specify a hex color, and a canvas tag for our canvas. We will also need to set ids for both.


  <html lang="en">

  <head>
      <meta charset="utf-8" />
      <title>
          Web Paint!
      </title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <input id="hex" placeholder="enter hex color" />&lt;/input&gt;
  <canvas id="draw"></canvas>

  <script src="app.js"></script>

  </html>
 

Setting up our variables & the resize function

In our app.js file, we need to assign our canvas id, draw, to a variable. Then, we’ll need to set another variable to the .getContext(’2d’) of that canvas variable so we can draw within it. In addition, we’ll need to write a small resize function so that we can set the canvas’s width and height to the window’s width and height. This way the canvas will take over the whole broswer window. We can do that like this:


    // set canvas id to variable
  var canvas = document.getElementById('draw');

  // get canvas 2D context and set it to the correct size
  var ctx = canvas.getContext('2d');
  resize(); 

  // resize canvas when window is resized
  function resize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}

Event listeners

Our app needs four event listeners:


// add event listeners to specify when functions should be triggered
  window.addEventListener('resize', resize);
  document.addEventListener('mousemove', draw);
  document.addEventListener('mousedown', setPosition);
  document.addEventListener('mouseenter', setPosition);
 

setPosition() and draw() functions

The drawing function of this project depends on the position of the mouse. Since we’ll be moving from one position to another one whenever the mouse is clicked or when the mouse is moved over the canvas, we’ll need to create a setPosition() function that sets variables to the user’s x & y position coordinates. We can then use those variables in our draw function.

  // last known position
  var pos = { x: 0, y: 0 };

  // new position from mouse events
  function setPosition(e) {
    pos.x = e.clientX;
    pos.y = e.clientY;
  }

At last, we come to our draw() function. Our function will need a closure followed by the following:

This is all our JavaScript:

  // set canvas id to variable
  var canvas = document.getElementById('draw');

  // get canvas 2D context and set it to the correct size
  var ctx = canvas.getContext('2d');
  resize(); 

  // resize canvas when window is resized
  function resize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }

  // add event listeners to specify when functions should be triggered
  window.addEventListener('resize', resize);
  document.addEventListener('mousemove', draw);
  document.addEventListener('mousedown', setPosition);
  document.addEventListener('mouseenter', setPosition);

  // last known position
  var pos = { x: 0, y: 0 };

  // new position from mouse events
  function setPosition(e) {
    pos.x = e.clientX;
    pos.y = e.clientY;
  }

  function draw(e) {
    
    if (e.buttons !== 1) return; // if mouse is pressed.....

    var color = document.getElementById('hex').value;

    ctx.beginPath(); // begin the drawing path

    ctx.lineWidth = 20; // width of line 
    ctx.lineCap = 'round'; // rounded end cap
    ctx.strokeStyle = color; // hex color of line

    ctx.moveTo(pos.x, pos.y); // from position
    setPosition(e);
    ctx.lineTo(pos.x, pos.y); // to position

    ctx.stroke(); // draw it!

   }
 

There you have it! We now have a drawing app that can use any hex color. Try inserting a hex code in the input box and click and drag to mouse to draw! After you’ve accomplished this, try to make another text box that changes the lineWidth of the line, or if you really want a challenge, try saving the canvas in a user’s localStorage so that the drawing will not be erased when the page is refreshed!

Exit Editor View

Write your code here!