diff --git a/images/board.jpg b/images/board.jpg new file mode 100644 index 0000000..b8f92f3 Binary files /dev/null and b/images/board.jpg differ diff --git a/images/board1.png b/images/board1.png new file mode 100644 index 0000000..00eb563 Binary files /dev/null and b/images/board1.png differ diff --git a/index.html b/index.html index d83280b..cdb8369 100644 --- a/index.html +++ b/index.html @@ -6,72 +6,81 @@ Canvas - - + + - -
-

White Board

- -
- -
-
- - - - - - -
-
- -
- -
-
- -
-
-
- +
+

White Board

+
+ +
+
+
+ +
- -
-
- Color_Box -

-

-
-
-
-

-
-
- -
- - + +
+ +
-
- - +
+ +
-
+
+ +
+ + +
+
+ + +
+ +
+
+ Color_Box +
+
+
+
+
+
+
+ +
+ + +
+
+ +
+
+ + diff --git a/script.js b/script.js index 865e63f..80cad99 100644 --- a/script.js +++ b/script.js @@ -1,29 +1,34 @@ -window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); -let lineWidth = 5 -let lineColor = 'black' +const penSize = document.querySelector('#pen-size') +const eraserSize = document.querySelector('#eraser-size') +const penColor = document.querySelector('#pen-color') +const resetBtn = document.querySelector('#reset-canvas') +const backgroundColors = document.querySelectorAll('.color-field') -// colors for line -const RED = 'red' -const BLUE = 'blue' -const GREEN = 'green' -const YELLOW = 'yellow' -const BLACK = 'black' -const WHITE = 'white' +const radioBtns = document.querySelectorAll('input[name="pen-type"]') -// canvas sizing +let lineWidth = 10 +const pencilWidth = 5 +let eraserWidth = 10 +let lineColor = 'black' +let eraserColor = 'white' + +penSize.value = lineWidth +eraserSize.value = lineWidth +penColor.value = 'black' + +// canvas sizing canvas.height = window.innerHeight; canvas.width = window.innerWidth; // variables let painting = false; -function startPosition(e) { +function startPosition() { painting = true - draw(e); } function finishedPosition() { @@ -35,8 +40,8 @@ function draw(e) { if (!painting) return; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; - canvasX = e.pageX - canvas.offsetLeft; - canvasY = e.pageY - canvas.offsetTop; + let canvasX = e.pageX - canvas.offsetLeft; + let canvasY = e.pageY - canvas.offsetTop; ctx.strokeStyle = lineColor; ctx.lineTo(canvasX, canvasY); @@ -46,59 +51,88 @@ function draw(e) { } const handleWidthChange = evt => { - if (evt.key === '+') { - lineWidth++ - } else if (evt.key === '-') { - lineWidth-- + if (evt.target.id === 'eraser-size') { + eraserWidth = parseInt(evt.target.value) + } else if (evt.target.id === 'pen-size') { + lineWidth = parseInt(evt.target.value) } } -const handleColorChange = evt => { - switch (evt.key) { - case '1': - lineColor = RED - break - case '2': - lineColor = BLUE +const handleColorChange = () => { + lineColor = penColor.value +} + +const handleEraserWidth = () => { + lineWidth = eraserSize.value +} + +const changeTool = (btn) => { + switch (btn.value) { + case 'pen': + lineWidth = penSize.value + lineColor = penColor.value + eraserWidth = eraserSize.value break - case '3': - lineColor = GREEN + case 'pencil': + lineWidth = pencilWidth + eraserWidth = eraserSize.value + lineColor = penColor.value break - case '4': - lineColor = YELLOW + case 'eraser': + lineWidth = pencilWidth + eraserWidth = eraserSize.value + lineColor = eraserColor break - case '5': - lineColor = BLACK } } -const eraser = (evt) => { - if (evt.key === 'e') { - lineColor = WHITE +const handleRadioInput = () => { + for (const radioBtn of radioBtns) { + if (radioBtn.checked) { + changeTool(radioBtn) + } } } -const Pencil = (evt) => { - if (evt.key === 'p') { - lineColor = BLACK - lineWidth = 5 - } + +const changeBackground = (evt) => { + ctx.fillStyle = evt.target.style.backgroundColor + ctx.fillRect(0,0, canvas.width, canvas.height) + eraserColor = evt.target.style.backgroundColor } -//EventListeners +const clearScreen = () => { + ctx.clearRect(0,0, canvas.width, canvas.height) + eraserColor = 'white' +} + +// EventListeners to draw a line canvas.addEventListener('mousedown', startPosition); canvas.addEventListener('mouseup', finishedPosition); canvas.addEventListener('mousemove', draw); +// background color + +for (const backgroundColor of backgroundColors) { + backgroundColor.addEventListener('click', changeBackground) +} + +// radio btn +for (const btn of radioBtns) { + btn.addEventListener('input', handleRadioInput) +} + +// reset button +resetBtn.addEventListener('click', clearScreen) + // respond to user input -window.addEventListener('keypress', handleWidthChange) -window.addEventListener("keypress", handleColorChange) -window.addEventListener('keypress', eraser) -window.addEventListener('keypress', Pencil) +penSize.addEventListener('input', handleWidthChange) +eraserSize.addEventListener('input', handleWidthChange) +penColor.addEventListener("input", handleColorChange) +eraserSize.addEventListener('input', handleEraserWidth) // Resizing when screen length changes window.addEventListener('resize', () => { canvas.height = window.innerHeight; canvas.width = window.innerWidth; -}); -}) +}); \ No newline at end of file diff --git a/style.css b/style.css index f089a49..82c5d2c 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,7 @@ header{ background-color: blanchedalmond; text-align: center; - font-size: xx-larger; + font-size: x-large; height: 20%; width: auto; } @@ -13,13 +13,14 @@ h1{ color:rgb(26, 93, 151); font-family: 'Festive', cursive; - + } body{ margin: 0; padding: 0; box-sizing: border-box; display: relative; + overflow: hidden; } #canvas{ /* position: absolute; @@ -34,8 +35,8 @@ body{ .control{ /* display: flex; */ position: absolute; - left: 10px; - top: 50px; + left: 10px; + top: 50px; /* height: 100% ; width: 100px; */ background-color:lightseagreen; @@ -53,12 +54,12 @@ body{ /* margin: 10px; padding: 10px; */ .size{ - margin: 10px 0px; - padding-top: 10px 0px; + margin: 10px 0; + padding-top: 10px; } .actions{ - margin: 10px 0px; - padding: 10px 0px; + margin: 10px 0; + padding: 10px 0; } #reset-canvas,save-canvas{ margin-right: 10px; @@ -73,7 +74,7 @@ body{ background-color: lightgreen; margin-left: 10px; margin-right: 10px; - padding:5px 0px 5px 20px; + padding:5px 0 5px 20px; } .but{ font-size:10px; @@ -85,3 +86,8 @@ body{ border-radius: 5px; width: auto; } + +.button { + display: flex; + justify-content: space-evenly; +} \ No newline at end of file