From 8e152d685f5985ccea195cbb9eccf96974fa45d8 Mon Sep 17 00:00:00 2001 From: happie Date: Sat, 16 Oct 2021 22:17:53 +0530 Subject: [PATCH] added sketchpad --- sketchPad/Whiteboard.html | 39 +++++++++++++++++++++++++ sketchPad/whiteboard.css | 45 +++++++++++++++++++++++++++++ sketchPad/whiteboard.js | 60 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 sketchPad/Whiteboard.html create mode 100644 sketchPad/whiteboard.css create mode 100644 sketchPad/whiteboard.js 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; +});