diff --git a/index.html b/index.html index 4a9ae40..9cb121a 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,61 @@ - - - - - - - Canvas - - - - + + + + + + Canvas + + + + + + + +
+

White Board

+ +
+ +
+
+ + + +
+
+ + +
+
+
+
+
+
+
+ +
+ + +
+
+ + +
+ + + + + + + - - - + + + \ No newline at end of file diff --git a/script.js b/script.js index 66a86bf..50f237a 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,20 @@ window.addEventListener("load", () => { const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); + const erasor = document.querySelector(".eraser"); + const brush = document.querySelector(".brush"); + const bl = document.querySelector(".bl"); + const blu = document.querySelector(".blu"); + const gr = document.querySelector(".gr"); + const rd = document.querySelector(".rd"); + const ye = document.querySelector(".ye"); + const wt = document.querySelector(".wt"); + const pencolor = document.querySelector(".pencolor"); + const pensize = document.querySelector(".pensize"); + + let lineColor = 'black'; + let lineSize = 10; + let tempColor = ''; // canvas sizing @@ -15,26 +29,116 @@ window.addEventListener("load", () => { } function finishedPosition() { painting = false + ctx.beginPath(); } function draw(e) { if (!painting) return; - ctx.lineWidth = 10; + ctx.lineWidth = lineSize; ctx.lineCap = "round"; + canvasX = e.pageX - canvas.offsetLeft; + canvasY = e.pageY - canvas.offsetTop; - ctx.lineTo(e.clientX, e.clientY); + ctx.strokeStyle = lineColor; + ctx.lineTo(canvasX, canvasY); ctx.stroke(); } + + function handleWidthChange(evt) { + if (evt.key === '+') { + lineWidth++ + } else if (evt.key === '-') { + lineWidth-- + } + } + + const handleColorChange = evt => { + switch (evt.key) { + case '1': + console.log(1); + lineColor = 'red'; + break + case '2': + lineColor = 'blue'; + break + case '3': + lineColor = 'green'; + break + case '4': + lineColor = 'yellow'; + break + case '5': + lineColor = 'black'; + } + } + + brush.addEventListener('click', () => { + lineColor = tempColor; + }) + + erasor.addEventListener('click', () => { + tempColor = lineColor; + lineColor = 'white'; + }) + + rd.addEventListener('click', () => { + ctx.fillStyle = 'red'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + bl.addEventListener('click', () => { + ctx.fillStyle = 'black'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + blu.addEventListener('click', () => { + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + gr.addEventListener('click', () => { + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + ye.addEventListener('click', () => { + ctx.fillStyle = 'yellow'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + wt.addEventListener('click', () => { + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + }) + + pencolor.addEventListener('input', () => { + lineColor = pencolor.value; + }) + + pensize.addEventListener('input', () => { + lineSize = pensize.value; + }) + + + //EventListeners canvas.addEventListener('mousedown', startPosition); canvas.addEventListener('mouseup', finishedPosition); canvas.addEventListener('mousemove', draw); + + window.addEventListener('keypress', handleWidthChange); + window.addEventListener("keypress", handleColorChange); + + + window.addEventListener('resize', () => { + canvas.height = window.innerHeight; + canvas.width = window.innerWidth; + }); }); + + // Resizing when screen length changes -window.addEventListener('resize', () => { - canvas.height = window.innerHeight; - canvas.width = window.innerWidth; -}); + diff --git a/style.css b/style.css index 0755b90..29b7eff 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,73 @@ +* { + margin: 0; + padding: 0; +} +header { + background-color: blanchedalmond; + text-align: center; + font-size: xx-larger; + height: 20%; + width: auto; +} +/* img{ + height: 10vh; + width: 200px; +} */ +h1 { + color: rgb(26, 93, 151); + font-family: "Festive", cursive; + /* font-family: 'Fuggles', cursive; + font-family: 'Tourney', cursive; */ +} body { margin: 0; padding: 0; box-sizing: border-box; + display: relative; } #canvas { + /* position: absolute; + left: 350px; + top: 242px; */ border: 2px solid black; + height: 100%; + width: 100%; + cursor: crosshair; + position: fixed; +} +.control { + /* display: flex; */ + position: absolute; + left: 10px; + top: 50px; + /* height: 100% ; + width: 100px; */ + background-color: white; +} +.color-field { + height: 35px; + width: 35px; + border-radius: 50px; + margin: 2px; + border: 2px solid white; +} +.button { + /* margin: 10px; + padding: 10px; */ +} +.size { + margin: 10px 0px; + padding-top: 10px 0px; +} +.actions { + margin: 10px 0px; + padding: 10px 0px; +} +#reset-canvas, +save-canvas { + margin-right: 10px; } - -.mynav { - padding-top: 10px; - padding-bottom: 10px; +.color { + margin-top: 10px; + /* padding-top: 10px; */ }