Build a Web Paint App with HTML/CSS/JS

Interested in this project?

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)

Throughout this tutorial, in order to test your code, click on index.html and open it up in your favorite browser. As you change the code, simply reload the page for updates to show up!

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"></input>
  <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: canvas 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:

a window event listener to trigger the resize function when window is resized
a document event listener to trigger the draw() function when mouse is moved
a document event listener to trigger the setPosition() (user’s mouse current position) function when mouse is clicked
a document event listener to trigger the setPosition() (user’s mouse current position) function when mouse is moved over the canvas function

// add window event listener to trigger when window is resized
window.addEventListener("resize", resize);

Try adding event listeners for the mousemove, mousedown, and mouseenter events. Note: we passed in the resize function into our window event listener. Make up function names to pass into the document event listeners.

Solution

// add event listeners to trigger on different mouse events
document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);

Here's what all the javascript should look like so far:

var canvas = document.getElementById("draw");

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 window event listener to trigger when window is resized
window.addEventListener("resize", resize);

// add event listeners to trigger on different mouse events
document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);

setPosition() and draw() functions

We passed the resize function into our window event listener but what about the draw and setPosition functions we passed into our document event listeners? Lets make them.

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 draw function requires a few things:

We must only draw on mouse click
We must use the color from the input field
We can set some properties for the line
We must draw the line

Lets first exit the function if the mouse is not clicked:

function draw(e) {
    if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
}

Then let's use the color from the input field:

function draw(e) {
    if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
 
    var color = document.getElementById("hex").value;
}

Cool! We just retrieved the value of the input field from our html file and stored it in the variable color.

Now let's start the line we will draw and give it some properties:

function draw(e) {
    if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
 
    var color = document.getElementById("hex").value;

    ctx.beginPath(); // begin the drawing path
    
    // line properties
    ctx.lineWidth = 20; // width of line
    ctx.lineCap = "round"; // rounded end cap
    ctx.strokeStyle = color; // hex color of line
}

Finally, let's draw the line!


function draw(e) {
    if (e.buttons !== 1) return; // if mouse is not clicked, do not go further
 
    var color = document.getElementById("hex").value;

    ctx.beginPath(); // begin the drawing path
    
    // line properties
    ctx.lineWidth = 20; // width of line
    ctx.lineCap = "round"; // rounded end cap
    ctx.strokeStyle = color; // hex color of line

    // draw line
    ctx.moveTo(pos.x, pos.y); // from position
    setPosition(e);
    ctx.lineTo(pos.x, pos.y); // to position
 
    ctx.stroke(); // draw it!
}

We used the moveTo and lineTo functions to draw the line. We are basically drawing a small line on every run through. Remove the lineCap line to see what's happening. Play around with the properties and see what each of them do.

Nice job!

This is all our JavaScript:

var canvas = document.getElementById("draw");

var ctx = canvas.getContext("2d");
resize();

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

// initialize position as 0,0
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 not clicked, do not go further

  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!
}


// add window event listener to trigger when window is resized
window.addEventListener("resize", resize);

// add event listeners to trigger on different mouse events
document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);

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!

Build a Web Paint App

Create your own digital whiteboard in HTML/CSS/JS

December 26, 2017

0 views