Tenet-Coding · yashwrdhn · Oct 16, 2021 · soumikbaithalu · Oct 17, 2021 · soumikbaithalu
diff --git a/sketchPad/Whiteboard.html b/sketchPad/Whiteboard.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>WhiteBoard</title>
+
+	<style>
+	    body{
+	     margin:0, 
+	    }
+	    canvas{
+	      background-color:#ffffff;
+	      max-width: 100%;
+	      /*max-height: 100%;*/
+	    }
+	</style>
+	<link rel="stylesheet" href="whiteboard.css">
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+</head>
+<body>
+
+	<div class="container pt-1 mb-1 d-flex justify-content-center">
+	  <button class="btn btn-outline-primary" id='draw'>draw</button>
+	  <button id="clear" class="btn btn-outline-danger">clear</button>
+
+	  <button id='eraser' class="btn btn-outline-warning">Eraser</button>
+	  <button  class="btn btn-outline-dark"><input id="color" class="btn btn-lg p-0" type="color" ></button>
+
+
+	</div>
+
+
+  	 <canvas class="border" width="1100" height="700" id="draw" ></canvas>
+
+<script src="whiteboard.js"></script>
+
+</body>
+</html>
diff --git a/sketchPad/whiteboard.css b/sketchPad/whiteboard.css
@@ -0,0 +1,45 @@
+
+/**
+ * Fix user-agent
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Canvas
+ */
+
+.whiteboard {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
+
+.colors {
+  position: fixed;
+}
+
+.color {
+  display: inline-block;
+  height: 48px;
+  width: 48px;
+}
+
+.color.black { background-color: black; }
+.color.red { background-color: red; }
+.color.green { background-color: green; }
+.color.blue { background-color: blue; }
+.color.white { background-color: white; }
+.color.yellow { background-color: yellow; }
diff --git a/sketchPad/whiteboard.js b/sketchPad/whiteboard.js
@@ -0,0 +1,60 @@
+const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+const eraser = document.querySelector('button#eraser');
+const clear = document.querySelector('button#clear');
+const color = document.querySelector('input#color');
+const drawbtn = document.querySelector('button#draw');
+canvas.width = 1300;
+canvas.height = 800;
+
+
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 5;
+ctx.strokeStyle = color.value;
+
+let backgroundColor = "#ffffff";
+canvas.style.backgroundColor = backgroundColor;
+let lastX = 0;
+let lastY = 0;
+let isDrawing = false;
+
+function draw(e) {
+  if(!isDrawing) return ;
+
+  console.log(e);
+  ctx.beginPath();
+  ctx.moveTo(lastX,lastY);
+  ctx.lineTo(e.offsetX,e.offsetY);
+  ctx.stroke();
+  [lastX,lastY] = [e.offsetX,e.offsetY];
+
+}
+
+
+canvas.addEventListener('mousedown', (e) => {
+  [lastX, lastY] = [e.offsetX, e.offsetY];isDrawing = true;
+});
+
+canvas.addEventListener('mousemove',draw);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout',() => isDrawing = false);
+
+clear.addEventListener('click',() => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
+
+color.addEventListener('change', (event) => {
+  ctx.strokeStyle = color.value;
+  ctx.lineWidth = 5;
+});
+
+drawbtn.addEventListener('click', (event) => {
+  ctx.strokeStyle = color.value;;
+  ctx.lineWidth = 5;
+});
+eraser.addEventListener('click',() => {
+  ctx.strokeStyle = backgroundColor;
+  ctx.lineWidth = 20;
+});