<h4>Weekly Coding Challenge #5: Drawing App</h4>

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

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this and how you can join the challenge
		<a target="_blank" href="https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/">here</a>.
	</p>
</footer>
@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;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}
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);
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js