Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Canvas: Paint</title>
		<script>
			document.addEventListener("DOMContentLoaded", () =>{
				const canvas = document.querySelector("canvas");
				const canvas2d = canvas.getContext("2d");
				const color_picker = document.querySelector('select[name="color"]');
				const line_picker = document.querySelector('select[name="line"]');

				canvas2d.strokeStyle = color_picker.value;
				canvas2d.lineWidth = line_picker.value;

				const reset = document.getElementById("button");


				let clicking = false;

				canvas.addEventListener("mousedown", (event) => {
					clicking = true;

					canvas2d.beginPath();

					const canvasX = event.pageX - canvas.offsetLeft;
					const canvasY = event.pageY - canvas.offsetTop;

					canvas2d.moveTo(canvasX,canvasY);
				});

				canvas.addEventListener("mousemove", (event) => {

					if(clicking == true){
					const canvasX = event.pageX - canvas.offsetLeft;
					const canvasY = event.pageY - canvas.offsetTop;

					canvas2d.lineTo(canvasX,canvasY);
					canvas2d.stroke();
					}
				});

				canvas.addEventListener("mouseup", () => {
					clicking = false;

					canvas2d.closePath();
				});

				canvas.addEventListener("mouseout", () => {
					clicking = false;
				});

				color_picker.addEventListener("change", () =>{
					canvas2d.strokeStyle = color_picker.value;
				});

				line_picker.addEventListener("change", () => {
					canvas2d.lineWidth = line_picker.value;
				})

				reset.addEventListener("click", () => {
					if(confirm("Are you sure bro?")){
					canvas2d.clearRect(0, 0, canvas.width, canvas.height);
					}
				});

				document.querySelector(".save").addEventListener("click", () => {
					const image = canvas.toDataURL("image/png");
					document.getElementById("output").innerHTML = '<img src="'+image+'" alt="">';
				});
			});

		</script>
		<style>
			#wrapper{
				width: 845px;
				margin:0 auto;
				padding-left: 135px;
				outline: 1px solid blue;
			}
			#header {
				width: 710px;
				display: flex;
				outline: 1px solid red;
			}

			#colorPicker {
				display: flex;
				justify-content: flex-start;
			}

			#linePicker {
				display: flex;
				justify-content: center;
			}

			#Clear {
				display: flex;
				justify-content: flex-end;
			}
			canvas {

				border: 5px dashed #000;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id=header>
				<div>
					<label id="colorPicker">
						Color
						<select name="color">
							<option value="#000">Black</option>
							<option value="#F00">Red</option>
							<option value="#0F0">Light Green</option>
							<option value="#060">Green</option>
							<option value="#00F">Blue</option>
							<option value="#0FF">Light Blue</option>
							<option value="#FF0">Yellow</option>
							<option value="#F0F">Pink</option>
						</select>
					</label>
					<label id="linePicker">
						Line
						<select name="line">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>

						</select>
					</label>
				</div>
				<div id="Clear">
					<input id="button" type="reset" value="Clear"">
					<input type="button" class="save" value="Saves">
				</div>
			</div>
			<div>
				<canvas width="700" height="700"></canvas>
			</div>
			<div id="output"></div>
		</div>
	</body>
</html>