diff --git a/sketchPad/Whiteboard.html b/sketchPad/Whiteboard.html
new file mode 100644
index 00000000..8f4349b1
--- /dev/null
+++ b/sketchPad/Whiteboard.html
@@ -0,0 +1,39 @@
+
+
+
+
+ WhiteBoard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sketchPad/whiteboard.css b/sketchPad/whiteboard.css
new file mode 100644
index 00000000..619f6191
--- /dev/null
+++ 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; }
\ No newline at end of file
diff --git a/sketchPad/whiteboard.js b/sketchPad/whiteboard.js
new file mode 100644
index 00000000..0d0fc68c
--- /dev/null
+++ 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;
+});