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:
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>
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;
}
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);
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!