From ae52a7bbe2aef39c2e0643654bdfab340ff68c1c Mon Sep 17 00:00:00 2001 From: Vivaan Date: Sun, 9 Oct 2022 13:49:16 +0530 Subject: [PATCH] add circle option --- index.html | 18 ++++++++++---- script.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 27 +++++++++++---------- 3 files changed, 95 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 1bc199c..4630721 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ +
@@ -12,19 +13,26 @@
Pen Colour :
- + +
+
+
Stroke:
+
- -
+
+
- - + + + diff --git a/script.js b/script.js index 5482a9a..83a78df 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,7 @@ function blackBoard() { const canvas = document.getElementById("black-board"); const ctx = canvas.getContext("2d"); + const strokeInp = document.getElementById("stroke"); //resizing canvas.width = canvas.getBoundingClientRect().width; @@ -53,11 +54,13 @@ function blackBoard() { //event listeners canvas.addEventListener("mousedown", (event) => { + ctx.lineWidth = strokeInp.value painting = true; lastX = event.offsetX; lastY = event.offsetY; }); canvas.addEventListener("touchstart", (event) => { + ctx.lineWidth = strokeInp.value painting = true; lastX = event.touches[0].clientX; lastY = event.touches[0].clientY; @@ -68,10 +71,74 @@ function blackBoard() { canvas.addEventListener("touchmove", draw); } +function circle() { + const canvas = document.getElementById("black-board"); + const penColor = document.getElementById("pen-color"); + const strokeInp = document.getElementById("stroke"); + const ctx = canvas.getContext("2d", { + willReadFrequently: true, + }); + let snapshot; + + ctx.lineJoin = "round"; + ctx.lineCap = "round"; + ctx.lineWidth = 2; + ctx.strokeStyle = "#FFFFFF"; + + let painting = false; + let lastX = 0; + let lastY = 0; + + function endPosition() { + painting = false; + ctx.beginPath(); + canvas.removeEventListener("mousemove", draw); + canvas.removeEventListener("touchmove", draw); + } + + function get_radius(x1, y1, x2, y2) { + return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); + } + + function draw(e) { + if (!painting) { + return; + } + + e.preventDefault(); + ctx.beginPath(); + ctx.putImageData(snapshot, 0, 0) + ctx.arc(lastX, lastY, get_radius(lastX, lastY, e.offsetX, e.offsetY), 0, Math.PI * 2); + ctx.stroke(); + } + + //event listeners + canvas.addEventListener("mousedown", (event) => { + ctx.strokeStyle = penColor.value + ctx.lineWidth = strokeInp.value + painting = true; + snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); + lastX = event.offsetX; + lastY = event.offsetY; + }); + canvas.addEventListener("touchstart", (event) => { + ctx.strokeStyle = penColor.value + ctx.lineWidth = strokeInp.value + painting = true; + snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); + lastX = event.touches[0].clientX; + lastY = event.touches[0].clientY; + }); + canvas.addEventListener("mouseup", endPosition); + canvas.addEventListener("touchend", endPosition); + canvas.addEventListener("mousemove", draw); + canvas.addEventListener("touchmove", draw); +} + function onClear() { const canvas = document.getElementById("black-board"); const context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); -} +} \ No newline at end of file diff --git a/styles.css b/styles.css index bf5b6a6..11224af 100644 --- a/styles.css +++ b/styles.css @@ -15,7 +15,7 @@ body { } .selectors { - margin: auto; + margin: 20px auto 20px auto; display: flex; align-items: center; justify-content: center; @@ -37,11 +37,10 @@ body { } .canvas-container { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; + margin: auto; + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; } canvas { @@ -55,27 +54,29 @@ canvas { cursor: url(./assets/ico/pen-cursor.ico) 0 50, pointer; } -.clear-button { - padding: 30px; - position: absolute; - right: 200px; +.circle i { + margin: auto; } -.clear-button button { +button { + --ggs: 2; cursor: pointer; border: none; + margin: 30px; color: white; padding: 15px 30px; text-align: center; text-decoration: none; display: inline-block; + height: 55px; font-size: 20px; background: linear-gradient(to left, purple, rgb(187, 62, 187)); border-radius: 15px; - width: 100%; + width: 80%; + transition: color 0.2s; } -.clear-button button:hover { +button:hover { color: black; background-color: white; }