Welcome folks today in this blog post we will be building a drawing paint editor web app using P5.js library in html5 css3 and javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code. First of all we will be including the p5.js
cdn as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>P5.js Paint Drawing App Editor</title> </head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css"> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> </html> |
After that we need to add the DOM Elements for the drawing app. We need to add the sidebar where we will having the paint brush and then we will having the canvas to draw something on the screen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="sidebar"> <ul> <li> <label for="color">Color:</label> <input type="color" id="color" /> </li> <li> <label for="weight">Stroke:</label> <input type="number" id="weight" min="2" max="200" value="3" /> </li> <li> <button id="clear"><i class="fa fa-trash"></i></button> </li> </ul> </div> |
As you can see we have the ability to choose the color from the color picker input and then we have the input field to choose the weight of the stroke of the paint app. And then we have the button to clear out everything from the screen or this is the eraser of the paint app.
Now we need to add the css
styles for the DOM Elements so that the paint drawing app can be styled as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<style> @import url('https://fonts.googleapis.com/css?family=Lato'); * { box-sizing: border-box; } body { min-height: 100vh; font-family: 'Lato', sans-serif; margin: 0; overflow: hidden; } h4 { background-color: #fff; position: absolute; top: 0; right: 0; margin: 0; padding: 10px; text-align: center; user-select: none; } .sidebar { background-color: #333; box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7); color: #fff; position: absolute; left: 0; top: 0; height: 100vh; padding: 5px; z-index: 1000; } .sidebar ul { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; list-style-type: none; padding: 0; margin: 0; height: 100%; } .sidebar ul li { padding: 5px 0; } .sidebar input, .sidebar button { text-align: center; width: 45px; } .sidebar li:last-of-type { margin-top: auto; } .sidebar button { background-color: transparent; border: none; color: #fff; font-size: 20px; } .sidebar label { display: block; font-size: 12px; margin-bottom: 3px; } </style> |
Now if you open the index.html
inside the browser you will see the below result as shown below
As you can see we have the sidebar
section where we have all the drawing app elements. Inside the sidebar we have the color picker and then we have the input field and then we have trash icon to clear everything from the screen.
Adding Javascript Code
Now we will be adding the javascript code for the paint drawing app. Inside the javascript we will be using the p5.js
library to draw something on the screen using the color selected from the color picker.
Now first of all we will be getting all the references from the DOM using the id's
given to the elements. For this you need to copy paste the below code
1 2 3 4 5 |
const colorInput = document.getElementById('color'); const weight = document.getElementById('weight'); const clear = document.getElementById('clear'); const paths = []; let currentPath = []; |
As you can see we have declared the paths
variable which is empty by default. And then we have another variable currentPath
which is empty by default. And then we are getting the references of the buttons which is used for clearing the canvas and then colorInput which is used for getting the colorpicker and then getting the weight of the paint.
Now we will be calling the setup()
method of the p5.js library. Inside the p5.js library we have different methods which is used for rendering things on the screen. For initializing the widgets you can use the setup()
method
1 2 3 4 |
function setup() { createCanvas(window.innerWidth, window.innerHeight); background(255); } |
As you can see inside this method we are first of all creating the canvas with dynamic width and height. For this we are using the createCanvas()
method and here we are passing the window inner width and inner height. And then we are setting the background color of the canvas and then we are passing the rgb
value i.e. 255 which is white color.
Adding the Mouse Press Event
Now we will be adding the mouse press event in order to draw something on the screen using the mouse press. For this we have the method which is built in p5.js library which is shown below
1 2 3 4 |
function mousePressed() { currentPath = []; paths.push(currentPath); } |
As you can see we are calling the mousePressed() method and inside it we are declaring the currentPath variable to an empty value. And then we are pushing the current path to the paths array.
Drawing on the Screen
Now we will be drawing something on the screen using the draw()
method. Inside this method we are first of all drawing something using the x and y coordinates. And then we are getting the colorInput value and then we are also getting the stroke value input.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function draw() { noFill(); if(mouseIsPressed){ const point = { x: mouseX, y: mouseY, color: colorInput.value, weight: weight.value }; currentPath.push(point); } paths.forEach(path => { beginShape(); path.forEach(point => { stroke(point.color); strokeWeight(point.weight); vertex(point.x, point.y); }); endShape(); }); } |
As you can see we are initializing the point object inside that we have the x, y values and then we are also adding the color input values and also we are adding the weight values. And then we are adding the currentPath to the point array. And then we are looping through all the paths and inside the loop we are using the stroke() method and we are passing the color of the point. And then we are using the vertex()
method to draw the point on the screen using x and y.
Clear out Everything on Screen
Now we will be clearing out everything from the screen. You should copy paste the below code in javascript
1 2 3 4 |
clear.addEventListener('click', () => { paths.splice(0); background(255); }); |
And inside the above method we are binding the method to the clear button. And inside that method we are removing all the paths from the screen and also we are setting the background color of the canvas to white.
And now if you open the index.html
file inside the browser you will see the below result
FULL SOURCE CODE
Wrapping the blog post this is the full source code of the index.html
file as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css?family=Lato'); * { box-sizing: border-box; } body { min-height: 100vh; font-family: 'Lato', sans-serif; margin: 0; overflow: hidden; } h4 { background-color: #fff; position: absolute; top: 0; right: 0; margin: 0; padding: 10px; text-align: center; user-select: none; } .sidebar { background-color: #333; box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7); color: #fff; position: absolute; left: 0; top: 0; height: 100vh; padding: 5px; z-index: 1000; } .sidebar ul { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; list-style-type: none; padding: 0; margin: 0; height: 100%; } .sidebar ul li { padding: 5px 0; } .sidebar input, .sidebar button { text-align: center; width: 45px; } .sidebar li:last-of-type { margin-top: auto; } .sidebar button { background-color: transparent; border: none; color: #fff; font-size: 20px; } .sidebar label { display: block; font-size: 12px; margin-bottom: 3px; } </style> <body> <div class="sidebar"> <ul> <li> <label for="color">Color:</label> <input type="color" id="color" /> </li> <li> <label for="weight">Stroke:</label> <input type="number" id="weight" min="2" max="200" value="3" /> </li> <li> <button id="clear"><i class="fa fa-trash"></i></button> </li> </ul> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script> const colorInput = document.getElementById('color'); const weight = document.getElementById('weight'); const clear = document.getElementById('clear'); const paths = []; let currentPath = []; function setup() { createCanvas(window.innerWidth, window.innerHeight); background(255); } function draw() { noFill(); if(mouseIsPressed){ const point = { x: mouseX, y: mouseY, color: colorInput.value, weight: weight.value }; currentPath.push(point); } paths.forEach(path => { beginShape(); path.forEach(point => { stroke(point.color); strokeWeight(point.weight); vertex(point.x, point.y); }); endShape(); }); } function mousePressed() { currentPath = []; paths.push(currentPath); } clear.addEventListener('click', () => { paths.splice(0); background(255); }); </script> </html> |