diff --git a/dist/main.js b/dist/main.js index 5dd107e..bdb0c8a 100644 --- a/dist/main.js +++ b/dist/main.js @@ -1,2 +1,2 @@ -!function(){"use strict";var t,e,s,a,n,r,i;t=class{constructor(t){this.canvasHandler=t,this.setupDrawingEventListeners()}setupDrawingEventListeners(){this.canvasHandler.canvas.addEventListener("mousedown",(t=>this.startDrawing(t))),this.canvasHandler.canvas.addEventListener("mousemove",(t=>this.draw(t))),this.canvasHandler.canvas.addEventListener("mouseup",(()=>this.stopDrawing())),this.canvasHandler.canvas.addEventListener("mouseout",(()=>this.stopDrawing()))}startDrawing(t){this.isDrawing||(this.currentPath=[],this.redoStack=[],this.isDrawing=!0);const e=t.clientX-this.canvasHandler.canvas.offsetLeft,s=t.clientY-this.canvasHandler.canvas.offsetTop;this.canvasHandler.ctx.beginPath(),this.canvasHandler.ctx.moveTo(e,s),this.currentPath.push({x:e,y:s,color:this.canvasHandler.colorHandler.currentColor,brushSize:this.canvasHandler.brushHandler.currentBrushSize}),this.draw(t)}draw(t){if(!this.isDrawing)return;const e=t.clientX-this.canvasHandler.canvas.offsetLeft,s=t.clientY-this.canvasHandler.canvas.offsetTop;this.canvasHandler.ctx.lineTo(e,s);const a=this.canvasHandler.eraserCheckbox.checked?this.canvasHandler.colorHandler.bgColorPicker.value:this.canvasHandler.colorHandler.currentColor;this.canvasHandler.brushHandler.setBrushStyling(a,this.canvasHandler.brushHandler.currentBrushSize),this.canvasHandler.ctx.stroke(),this.currentPath.push({x:e,y:s,color:a,brushSize:this.canvasHandler.brushHandler.currentBrushSize})}stopDrawing(){this.canvasHandler.eraserCheckbox.checked&&(this.currentPath.isErase=!0),this.isDrawing&&(this.canvasHandler.undoAndRedoHandler.drawnPaths.push(this.currentPath),this.isDrawing=!1)}},e=class{constructor(t){this.canvasHandler=t,this.setupColorHandling()}setupColorHandling(){this.currentColor="black",this.brushColorPicker=document.getElementById("color-picker"),this.brushColorPicker.addEventListener("input",(()=>{this.currentColor=this.brushColorPicker.value})),this.bgColorPicker=document.getElementById("background-color-picker"),this.bgColorPicker.addEventListener("input",(()=>{const t=this.canvasHandler.undoAndRedoHandler.drawnPaths,e=this.canvasHandler.undoAndRedoHandler.redoStack;this.canvasHandler.clear(),this.canvasHandler.undoAndRedoHandler.drawnPaths=t,this.canvasHandler.undoAndRedoHandler.redoStack=e,this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((t=>this.canvasHandler.undoAndRedoHandler.redrawPath(t))),this.canvasHandler.canvas.style.backgroundColor=this.bgColorPicker.value}))}},s=class{constructor(t){this.canvasHandler=t,this.setupBrushSize()}setupBrushSize(){this.brushSizeInput=document.getElementById("size-slider"),this.brushSizeInput.addEventListener("input",(()=>this.updateBrushSize())),this.currentBrushSize=5}setBrushStyling(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.canvasHandler.colorHandler.currentColor,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.currentBrushSize;this.canvasHandler.ctx.lineCap="round",this.canvasHandler.ctx.lineWidth=e,this.canvasHandler.ctx.strokeStyle=t}updateBrushSize(){this.currentBrushSize=parseInt(this.brushSizeInput.value),this.setBrushStyling()}},a=class{constructor(t){this.canvasHandler=t,this.setupUndoBtn(),this.setupRedoBtn()}setupUndoBtn(){this.drawnPaths=[],this.undoBtn=document.getElementById("undo"),this.undoBtn.addEventListener("click",(()=>this.undo()))}setupRedoBtn(){this.redoStack=[],this.redoBtn=document.getElementById("redo"),this.redoBtn.addEventListener("click",(()=>this.redo()))}undo(){if(this.drawnPaths.length>0){this.canvasHandler.ctx.clearRect(0,0,this.canvasHandler.canvas.width,this.canvasHandler.canvas.height);const t=this.drawnPaths.pop();this.redoStack.push(t),this.drawnPaths.forEach((t=>this.redrawPath(t)))}}redrawPath(t){t.forEach(((e,s)=>{0===s?(this.canvasHandler.ctx.beginPath(),this.canvasHandler.ctx.moveTo(e.x,e.y)):(this.canvasHandler.ctx.lineTo(e.x,e.y),t.isErase&&(e.color=this.canvasHandler.colorHandler.bgColorPicker.value),this.canvasHandler.brushHandler.setBrushStyling(e.color,e.brushSize),this.canvasHandler.ctx.stroke())}))}redo(){if(this.redoStack.length>0){this.canvasHandler.ctx.clearRect(0,0,this.canvasHandler.canvas.width,this.canvasHandler.canvas.height);const t=this.redoStack.pop();this.drawnPaths.push(t),this.drawnPaths.forEach((t=>this.redrawPath(t)))}}},n=class{constructor(t){this.canvasHandler=t,this.setupDownloadBtn()}setupDownloadBtn(){this.downloadBtn=document.getElementById("download"),this.downloadBtn.addEventListener("click",(()=>this.download()))}download(){const t=document.createElement("canvas"),e=t.getContext("2d");t.width=this.canvasHandler.canvas.width,t.height=this.canvasHandler.canvas.height,e.fillStyle=this.canvasHandler.canvas.style.backgroundColor,e.fillRect(0,0,t.width,t.height),e.drawImage(this.canvasHandler.canvas,0,0);const s=t.toDataURL("image/png"),a=document.createElement("a");a.href=s,a.download="canvas.png",a.click()}},r=class{constructor(){this.setupCanvas(),this.setupCanvasProportions(),this.setupEraser(),this.setupClearBtn(),this.drawingHandler=new t(this),this.colorHandler=new e(this),this.brushHandler=new s(this),this.undoAndRedoHandler=new a(this),this.downloadHandler=new n(this)}setupCanvas(){this.canvas=document.getElementById("canvas"),this.ctx=this.canvas.getContext("2d"),this.isDrawing=!1}setupCanvasProportions(){this.canvas.style.position="absolute",this.canvas.style.top="100px",this.canvas.height=window.innerHeight-100-100,this.canvas.width=window.innerWidth}setupClearBtn(){this.clearBtn=document.getElementById("clear"),this.clearBtn.addEventListener("click",(()=>this.clear()))}setupEraser(){this.eraserCheckbox=document.getElementById("eraser")}clear(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.canvas.style.backgroundColor="white",this.redoStack=[],this.drawnPaths=[]}},i=class{constructor(){this.brushRadio=document.getElementById("brush"),this.eraserRadio=document.getElementById("eraser"),this.brushLabel=document.querySelector('label[for="brush"]'),this.eraserLabel=document.querySelector('label[for="eraser"]'),this.detectChange(),this.updateIcon()}updateIcon(){this.brushLabel.querySelector("img").src=this.brushRadio.checked?"assets/tab-icon.png":"assets/menu icons/not-active-brush.png",this.eraserLabel.querySelector("img").src=this.eraserRadio.checked?"assets/menu icons/active-eraser.png":"assets/menu icons/not-active-eraser.png"}detectChange(){[this.brushRadio,this.eraserRadio].forEach((t=>{t.addEventListener("change",(()=>this.updateIcon()))}))}},document.addEventListener("DOMContentLoaded",(()=>{new r,new i}))}(); +!function(){"use strict";var e,a,t,s,n,r,i,d;e=class{constructor(e){this.canvasHandler=e,this.setupDrawingEventListeners()}setupDrawingEventListeners(){this.canvasHandler.canvas.addEventListener("mousedown",(e=>this.startDrawing(e))),this.canvasHandler.canvas.addEventListener("mousemove",(e=>this.draw(e))),this.canvasHandler.canvas.addEventListener("mouseup",(()=>this.stopDrawing())),this.canvasHandler.canvas.addEventListener("mouseout",(()=>this.stopDrawing()))}startDrawing(e){this.isDrawing||(this.currentPath=[],this.redoStack=[],this.isDrawing=!0);const a=e.clientX-this.canvasHandler.canvas.offsetLeft,t=e.clientY-this.canvasHandler.canvas.offsetTop;this.canvasHandler.ctx.beginPath(),this.canvasHandler.ctx.moveTo(a,t),this.currentPath.push({x:a,y:t,color:this.canvasHandler.colorHandler.currentColor,brushSize:this.canvasHandler.brushHandler.currentBrushSize}),this.draw(e)}draw(e){if(!this.isDrawing)return;const a=e.clientX-this.canvasHandler.canvas.offsetLeft,t=e.clientY-this.canvasHandler.canvas.offsetTop;this.canvasHandler.ctx.lineTo(a,t);const s=this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked?this.canvasHandler.colorHandler.bgColorPicker.value:this.canvasHandler.colorHandler.currentColor;this.canvasHandler.brushHandler.setBrushStyling(s,this.canvasHandler.brushHandler.currentBrushSize),this.canvasHandler.ctx.stroke(),this.currentPath.push({x:a,y:t,color:s,brushSize:this.canvasHandler.brushHandler.currentBrushSize})}stopDrawing(){this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked&&(this.currentPath.isErase=!0),this.isDrawing&&(this.canvasHandler.undoAndRedoHandler.drawnPaths.push(this.currentPath),this.isDrawing=!1)}},a=class{constructor(e){this.canvasHandler=e,this.setupColorHandling()}setupColorHandling(){this.currentColor="black",this.brushColorPicker=document.getElementById("color-picker"),this.brushColorPicker.addEventListener("input",(()=>{this.currentColor=this.brushColorPicker.value})),this.bgColorPicker=document.getElementById("background-color-picker"),this.bgColorPicker.addEventListener("input",(()=>{const e=this.canvasHandler.undoAndRedoHandler.drawnPaths,a=this.canvasHandler.undoAndRedoHandler.redoStack;this.canvasHandler.eraseAndClearHandler.clear(),this.canvasHandler.undoAndRedoHandler.drawnPaths=e,this.canvasHandler.undoAndRedoHandler.redoStack=a,this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((e=>this.canvasHandler.undoAndRedoHandler.redrawPath(e))),this.canvasHandler.canvas.style.backgroundColor=this.bgColorPicker.value}))}},t=class{constructor(e){this.canvasHandler=e,this.setupBrushSize()}setupBrushSize(){this.brushSizeInput=document.getElementById("size-slider"),this.brushSizeInput.addEventListener("input",(()=>this.updateBrushSize())),this.currentBrushSize=5}setBrushStyling(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.canvasHandler.colorHandler.currentColor,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.currentBrushSize;this.canvasHandler.ctx.lineCap="round",this.canvasHandler.ctx.lineWidth=a,this.canvasHandler.ctx.strokeStyle=e}updateBrushSize(){this.currentBrushSize=parseInt(this.brushSizeInput.value),this.setBrushStyling()}},s=class{constructor(e){this.canvasHandler=e,this.setupEraser(),this.setupClearBtn()}setupClearBtn(){this.clearBtn=document.getElementById("clear"),this.clearBtn.addEventListener("click",(()=>this.clear()))}setupEraser(){this.eraserCheckbox=document.getElementById("eraser")}clear(){this.canvasHandler.ctx.clearRect(0,0,this.canvasHandler.canvas.width,this.canvasHandler.canvas.height),this.canvasHandler.canvas.style.backgroundColor="white",this.canvasHandler.undoAndRedoHandler.redoStack=[],this.canvasHandler.undoAndRedoHandler.drawnPaths=[]}},n=class{constructor(e){this.canvasHandler=e,this.setupUndoBtn(),this.setupRedoBtn()}setupUndoBtn(){this.drawnPaths=[],this.undoBtn=document.getElementById("undo"),this.undoBtn.addEventListener("click",(()=>this.undo()))}setupRedoBtn(){this.redoStack=[],this.redoBtn=document.getElementById("redo"),this.redoBtn.addEventListener("click",(()=>this.redo()))}undo(){if(this.drawnPaths.length>0){this.canvasHandler.ctx.clearRect(0,0,this.canvasHandler.canvas.width,this.canvasHandler.canvas.height);const e=this.drawnPaths.pop();this.redoStack.push(e),this.drawnPaths.forEach((e=>this.redrawPath(e)))}}redrawPath(e){e.forEach(((a,t)=>{0===t?(this.canvasHandler.ctx.beginPath(),this.canvasHandler.ctx.moveTo(a.x,a.y)):(this.canvasHandler.ctx.lineTo(a.x,a.y),e.isErase&&(a.color=this.canvasHandler.colorHandler.bgColorPicker.value),this.canvasHandler.brushHandler.setBrushStyling(a.color,a.brushSize),this.canvasHandler.ctx.stroke())}))}redo(){if(this.redoStack.length>0){this.canvasHandler.ctx.clearRect(0,0,this.canvasHandler.canvas.width,this.canvasHandler.canvas.height);const e=this.redoStack.pop();this.drawnPaths.push(e),this.drawnPaths.forEach((e=>this.redrawPath(e)))}}},r=class{constructor(e){this.canvasHandler=e,this.setupDownloadBtn()}setupDownloadBtn(){this.downloadBtn=document.getElementById("download"),this.downloadBtn.addEventListener("click",(()=>this.download()))}download(){const e=document.createElement("canvas"),a=e.getContext("2d");e.width=this.canvasHandler.canvas.width,e.height=this.canvasHandler.canvas.height,a.fillStyle=this.canvasHandler.canvas.style.backgroundColor,a.fillRect(0,0,e.width,e.height),a.drawImage(this.canvasHandler.canvas,0,0);const t=e.toDataURL("image/png"),s=document.createElement("a");s.href=t,s.download="canvas.png",s.click()}},i=class{constructor(){this.setupCanvas(),this.setupCanvasProportions(),this.drawingHandler=new e(this),this.colorHandler=new a(this),this.brushHandler=new t(this),this.eraseAndClearHandler=new s(this),this.undoAndRedoHandler=new n(this),this.downloadHandler=new r(this)}setupCanvas(){this.canvas=document.getElementById("canvas"),this.ctx=this.canvas.getContext("2d"),this.isDrawing=!1}setupCanvasProportions(){this.canvas.style.position="absolute",this.canvas.style.top="100px",this.canvas.height=window.innerHeight-100-100,this.canvas.width=window.innerWidth}},d=class{constructor(){this.brushRadio=document.getElementById("brush"),this.eraserRadio=document.getElementById("eraser"),this.brushLabel=document.querySelector('label[for="brush"]'),this.eraserLabel=document.querySelector('label[for="eraser"]'),this.detectChange(),this.updateIcon()}updateIcon(){this.brushLabel.querySelector("img").src=this.brushRadio.checked?"assets/tab-icon.png":"assets/menu icons/not-active-brush.png",this.eraserLabel.querySelector("img").src=this.eraserRadio.checked?"assets/menu icons/active-eraser.png":"assets/menu icons/not-active-eraser.png"}detectChange(){[this.brushRadio,this.eraserRadio].forEach((e=>{e.addEventListener("change",(()=>this.updateIcon()))}))}},document.addEventListener("DOMContentLoaded",(()=>{new i,new d}))}(); //# sourceMappingURL=main.js.map \ No newline at end of file diff --git a/dist/main.js.map b/dist/main.js.map index 0715d6c..5036ee8 100644 --- a/dist/main.js.map +++ b/dist/main.js.map @@ -1 +1 @@ -{"version":3,"file":"main.js","mappings":"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","sources":["webpack://canvas-project/./src/scripts/drawingHandler.js","webpack://canvas-project/./src/scripts/colorHandler.js","webpack://canvas-project/./src/scripts/brushHandler.js","webpack://canvas-project/./src/scripts/UndoAndRedoHandler.js","webpack://canvas-project/./src/scripts/downloadHandler.js","webpack://canvas-project/./src/scripts/canvasHandler.js","webpack://canvas-project/./src/scripts/toolIcon.js","webpack://canvas-project/./src/index.js"],"sourcesContent":["class DrawingHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupDrawingEventListeners();\n }\n\n setupDrawingEventListeners() {\n this.canvasHandler.canvas.addEventListener(\"mousedown\", (e) => this.startDrawing(e));\n this.canvasHandler.canvas.addEventListener(\"mousemove\", (e) => this.draw(e));\n this.canvasHandler.canvas.addEventListener(\"mouseup\", () => this.stopDrawing());\n this.canvasHandler.canvas.addEventListener(\"mouseout\", () => this.stopDrawing());\n }\n\n // // drawing actions\n startDrawing(e) {\n if (!this.isDrawing) {\n // clear the stacks when a new drawing begins\n this.currentPath = [];\n this.redoStack = [];\n this.isDrawing = true;\n }\n\n // calculate the adjusted mouse coordinates relative to the canvas\n const canvasMouseX = e.clientX - this.canvasHandler.canvas.offsetLeft;\n const canvasMouseY = e.clientY - this.canvasHandler.canvas.offsetTop;\n\n // begin a new path in the canvas ctx & move to initial drawing pos\n this.canvasHandler.ctx.beginPath();\n\n // move the brush to the adjusted mouse coordinates\n this.canvasHandler.ctx.moveTo(canvasMouseX, canvasMouseY);\n\n // store the starting point in the drawing path\n this.currentPath.push({\n x: canvasMouseX,\n y: canvasMouseY,\n color: this.canvasHandler.colorHandler.currentColor,\n brushSize: this.canvasHandler.brushHandler.currentBrushSize,\n });\n\n // draw a dot at the starting point\n this.draw(e);\n }\n\n draw(e) {\n if (!this.isDrawing) return;\n\n // calculate the adjusted mouse coordinates relative to the canvas\n const mouseX = e.clientX - this.canvasHandler.canvas.offsetLeft;\n const mouseY = e.clientY - this.canvasHandler.canvas.offsetTop;\n\n // connect the current drawing position to the new position\n this.canvasHandler.ctx.lineTo(mouseX, mouseY);\n\n // Set brush styling based on whether eraser or brush is checked\n const color = this.canvasHandler.eraserCheckbox.checked\n ? this.canvasHandler.colorHandler.bgColorPicker.value\n : this.canvasHandler.colorHandler.currentColor;\n\n this.canvasHandler.brushHandler.setBrushStyling(\n color,\n this.canvasHandler.brushHandler.currentBrushSize\n );\n\n // draw the line on the canvas\n this.canvasHandler.ctx.stroke();\n\n // store the current point in the drawing path\n this.currentPath.push({\n x: mouseX,\n y: mouseY,\n color: color,\n brushSize: this.canvasHandler.brushHandler.currentBrushSize,\n });\n }\n\n stopDrawing() {\n if (this.canvasHandler.eraserCheckbox.checked)\n this.currentPath.isErase = true;\n if (this.isDrawing) {\n this.canvasHandler.undoAndRedoHandler.drawnPaths.push(this.currentPath); // if currently drawing, save the current path to the stack (for undo feature)\n this.isDrawing = false;\n }\n }\n}\n\nexport default DrawingHandler;\n","class ColorHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler\n this.setupColorHandling()\n }\n\n setupColorHandling() {\n this.currentColor = \"black\";\n\n // if a brush color has been selected..\n this.brushColorPicker = document.getElementById(\"color-picker\");\n this.brushColorPicker.addEventListener(\"input\", () => {\n this.currentColor = this.brushColorPicker.value;\n });\n\n // if a bg color has been selected..\n this.bgColorPicker = document.getElementById(\"background-color-picker\");\n\n // for erase action\n this.bgColorPicker.addEventListener(\n \"input\",\n () => {\n const drawnPaths = this.canvasHandler.undoAndRedoHandler.drawnPaths;\n const redoStack = this.canvasHandler.undoAndRedoHandler.redoStack;\n this.canvasHandler.clear()\n this.canvasHandler.undoAndRedoHandler.drawnPaths = drawnPaths;\n this.canvasHandler.undoAndRedoHandler.redoStack = redoStack;\n this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((path) =>\n this.canvasHandler.undoAndRedoHandler.redrawPath(path)\n );\n this.canvasHandler.canvas.style.backgroundColor = this.bgColorPicker.value;\n }\n );\n }\n}\n\nexport default ColorHandler","class BrushHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupBrushSize();\n }\n\n setupBrushSize() {\n this.brushSizeInput = document.getElementById(\"size-slider\");\n this.brushSizeInput.addEventListener(\"input\", () => this.updateBrushSize());\n this.currentBrushSize = 5;\n }\n\n setBrushStyling(\n color = this.canvasHandler.colorHandler.currentColor,\n brushSize = this.currentBrushSize\n ) {\n this.canvasHandler.ctx.lineCap = \"round\";\n this.canvasHandler.ctx.lineWidth = brushSize;\n this.canvasHandler.ctx.strokeStyle = color;\n }\n\n updateBrushSize() {\n this.currentBrushSize = parseInt(this.brushSizeInput.value);\n this.setBrushStyling();\n }\n}\n\nexport default BrushHandler;\n","class UndoAndRedoHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupUndoBtn()\n this.setupRedoBtn()\n }\n\n setupUndoBtn() {\n this.drawnPaths = [];\n this.undoBtn = document.getElementById(\"undo\");\n this.undoBtn.addEventListener(\"click\", () => this.undo());\n }\n\n setupRedoBtn() {\n this.redoStack = [];\n this.redoBtn = document.getElementById(\"redo\");\n this.redoBtn.addEventListener(\"click\", () => this.redo());\n }\n\n undo() {\n // if there are paths in the stack\n if (this.drawnPaths.length > 0) {\n // clear canvas (to prep for redraw)\n this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height);\n\n // remove (undo) last drawn path from the stack\n const undonePath = this.drawnPaths.pop();\n // push the undone path to redo stack\n this.redoStack.push(undonePath);\n\n // redraw all paths that are still in the stack\n this.drawnPaths.forEach((path) => this.redrawPath(path));\n }\n }\n\n redrawPath(path) {\n path.forEach((point, idx) => {\n // if it's the starting point of the path\n if (idx === 0) {\n // move to the starting point\n this.canvasHandler.ctx.beginPath();\n this.canvasHandler.ctx.moveTo(point.x, point.y);\n } else {\n // draw a line to the next point\n this.canvasHandler.ctx.lineTo(point.x, point.y);\n\n // set brush styling based on point clr & brush size\n if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColorPicker.value;\n this.canvasHandler.brushHandler.setBrushStyling(point.color, point.brushSize);\n\n this.canvasHandler.ctx.stroke();\n }\n });\n }\n\n redo() {\n // if there are paths in the redo stack\n if (this.redoStack.length > 0) {\n // clear canvas (to prep for redraw)\n this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height);\n\n // remove (redo) last undone path from the redo stack\n const redonePath = this.redoStack.pop();\n // push the redone path to drawnPaths stack\n this.drawnPaths.push(redonePath);\n\n // redraw all paths with the correct color\n this.drawnPaths.forEach((path) => this.redrawPath(path));\n }\n }\n}\n\nexport default UndoAndRedoHandler;\n","class DownloadHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupDownloadBtn()\n }\n\n setupDownloadBtn() {\n this.downloadBtn = document.getElementById(\"download\");\n this.downloadBtn.addEventListener(\"click\", () => this.download());\n }\n\n download() {\n // create a temp canvas to preserve the background (wo this the bg would be transparent)\n const tempCanvas = document.createElement(\"canvas\");\n const tempCtx = tempCanvas.getContext(\"2d\");\n tempCanvas.width = this.canvasHandler.canvas.width;\n tempCanvas.height = this.canvasHandler.canvas.height;\n\n // set the background color on the temp canvas\n tempCtx.fillStyle = this.canvasHandler.canvas.style.backgroundColor;\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n\n // draw the existing canvas content on top of the background\n tempCtx.drawImage(this.canvasHandler.canvas, 0, 0);\n\n // get the data URL of the temp canvas\n const dataUrl = tempCanvas.toDataURL(\"image/png\");\n\n // create a link ele for download\n const link = document.createElement(\"a\");\n link.href = dataUrl;\n link.download = \"canvas.png\";\n\n // trigger the download\n link.click();\n }\n}\n\nexport default DownloadHandler;","import DrawingHandler from \"./drawingHandler\";\nimport ColorHandler from \"./colorHandler\";\nimport BrushHandler from \"./brushHandler\";\nimport UndoAndRedoHandler from \"./UndoAndRedoHandler\";\nimport DownloadHandler from \"./downloadHandler\";\n\nclass CanvasHandler {\n constructor() {\n this.setupCanvas();\n this.setupCanvasProportions();\n this.setupEraser();\n this.setupClearBtn();\n\n this.drawingHandler = new DrawingHandler(this);\n this.colorHandler = new ColorHandler(this);\n this.brushHandler = new BrushHandler(this);\n this.undoAndRedoHandler = new UndoAndRedoHandler(this);\n this.downloadHandler = new DownloadHandler(this);\n }\n\n // setting up the canvas\n setupCanvas() {\n this.canvas = document.getElementById(\"canvas\");\n this.ctx = this.canvas.getContext(\"2d\");\n this.isDrawing = false;\n }\n\n setupCanvasProportions() {\n const topMargin = 100;\n const bottomMargin = 100;\n\n this.canvas.style.position = \"absolute\";\n this.canvas.style.top = topMargin + \"px\";\n\n this.canvas.height = window.innerHeight - topMargin - bottomMargin;\n this.canvas.width = window.innerWidth;\n }\n\n setupClearBtn() {\n this.clearBtn = document.getElementById(\"clear\");\n this.clearBtn.addEventListener(\"click\", () => this.clear());\n }\n\n setupEraser() {\n this.eraserCheckbox = document.getElementById(\"eraser\");\n }\n\n // btn actions\n clear() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.canvas.style.backgroundColor = \"white\";\n this.redoStack = [];\n this.drawnPaths = [];\n }\n}\n\nexport default CanvasHandler;\n","class ToolIcon {\n constructor() {\n this.brushRadio = document.getElementById(\"brush\");\n this.eraserRadio = document.getElementById(\"eraser\");\n this.brushLabel = document.querySelector('label[for=\"brush\"]');\n this.eraserLabel = document.querySelector('label[for=\"eraser\"]');\n this.detectChange();\n this.updateIcon();\n }\n\n updateIcon() {\n // update brush icon based on whether the brush is checked\n this.brushLabel.querySelector(\"img\").src = this.brushRadio.checked\n ? \"assets/tab-icon.png\"\n : \"assets/menu icons/not-active-brush.png\";\n\n // update eraser icon based on whether the eraser is checked\n this.eraserLabel.querySelector(\"img\").src = this.eraserRadio.checked\n ? \"assets/menu icons/active-eraser.png\"\n : \"assets/menu icons/not-active-eraser.png\";\n }\n\n detectChange() {\n // update icon clr when tool is changed\n [this.brushRadio, this.eraserRadio].forEach((radio) => {\n radio.addEventListener(\"change\", () => this.updateIcon());\n });\n }\n}\n\nexport default ToolIcon;\n","import CanvasHandler from \"./scripts/canvasHandler\";\nimport ToolIcon from \"./scripts/toolIcon\";\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new CanvasHandler();\n new ToolIcon();\n});\n\n\n\n\n\n\n\n\n"],"names":["constructor","canvasHandler","this","setupDrawingEventListeners","canvas","addEventListener","e","startDrawing","draw","stopDrawing","isDrawing","currentPath","redoStack","canvasMouseX","clientX","offsetLeft","canvasMouseY","clientY","offsetTop","ctx","beginPath","moveTo","push","x","y","color","colorHandler","currentColor","brushSize","brushHandler","currentBrushSize","mouseX","mouseY","lineTo","eraserCheckbox","checked","bgColorPicker","value","setBrushStyling","stroke","isErase","undoAndRedoHandler","drawnPaths","setupColorHandling","brushColorPicker","document","getElementById","clear","forEach","path","redrawPath","style","backgroundColor","setupBrushSize","brushSizeInput","updateBrushSize","arguments","length","undefined","lineCap","lineWidth","strokeStyle","parseInt","setupUndoBtn","setupRedoBtn","undoBtn","undo","redoBtn","redo","clearRect","width","height","undonePath","pop","point","idx","redonePath","setupDownloadBtn","downloadBtn","download","tempCanvas","createElement","tempCtx","getContext","fillStyle","fillRect","drawImage","dataUrl","toDataURL","link","href","click","setupCanvas","setupCanvasProportions","setupEraser","setupClearBtn","drawingHandler","DrawingHandler","ColorHandler","BrushHandler","UndoAndRedoHandler","downloadHandler","DownloadHandler","position","top","topMargin","window","innerHeight","innerWidth","clearBtn","brushRadio","eraserRadio","brushLabel","querySelector","eraserLabel","detectChange","updateIcon","src","radio","CanvasHandler","ToolIcon"],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"main.js","mappings":"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","sources":["webpack://canvas-project/./src/scripts/drawingHandler.js","webpack://canvas-project/./src/scripts/colorHandler.js","webpack://canvas-project/./src/scripts/brushHandler.js","webpack://canvas-project/./src/scripts/eraseAndClearHandler.js","webpack://canvas-project/./src/scripts/undoAndRedoHandler.js","webpack://canvas-project/./src/scripts/downloadHandler.js","webpack://canvas-project/./src/scripts/canvasHandler.js","webpack://canvas-project/./src/scripts/toolIcon.js","webpack://canvas-project/./src/index.js"],"sourcesContent":["class DrawingHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupDrawingEventListeners();\n }\n\n setupDrawingEventListeners() {\n this.canvasHandler.canvas.addEventListener(\"mousedown\", (e) => this.startDrawing(e));\n this.canvasHandler.canvas.addEventListener(\"mousemove\", (e) => this.draw(e));\n this.canvasHandler.canvas.addEventListener(\"mouseup\", () => this.stopDrawing());\n this.canvasHandler.canvas.addEventListener(\"mouseout\", () => this.stopDrawing());\n }\n\n startDrawing(e) {\n if (!this.isDrawing) {\n // clear the stacks when a new drawing begins\n this.currentPath = [];\n this.redoStack = [];\n this.isDrawing = true;\n }\n\n // calculate the adjusted mouse coordinates relative to the canvas\n const canvasMouseX = e.clientX - this.canvasHandler.canvas.offsetLeft;\n const canvasMouseY = e.clientY - this.canvasHandler.canvas.offsetTop;\n\n // begin a new path in the canvas ctx & move to initial drawing pos\n this.canvasHandler.ctx.beginPath();\n\n // move the brush to the adjusted mouse coordinates\n this.canvasHandler.ctx.moveTo(canvasMouseX, canvasMouseY);\n\n // store the starting point in the drawing path\n this.currentPath.push({\n x: canvasMouseX,\n y: canvasMouseY,\n color: this.canvasHandler.colorHandler.currentColor,\n brushSize: this.canvasHandler.brushHandler.currentBrushSize,\n });\n\n // draw a dot at the starting point\n this.draw(e);\n }\n\n draw(e) {\n if (!this.isDrawing) return;\n\n // calculate the adjusted mouse coordinates relative to the canvas\n const mouseX = e.clientX - this.canvasHandler.canvas.offsetLeft;\n const mouseY = e.clientY - this.canvasHandler.canvas.offsetTop;\n\n // connect the current drawing position to the new position\n this.canvasHandler.ctx.lineTo(mouseX, mouseY);\n\n // Set brush styling based on whether eraser or brush is checked\n const color = this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked\n ? this.canvasHandler.colorHandler.bgColorPicker.value\n : this.canvasHandler.colorHandler.currentColor;\n\n this.canvasHandler.brushHandler.setBrushStyling(\n color,\n this.canvasHandler.brushHandler.currentBrushSize\n );\n\n // draw the line on the canvas\n this.canvasHandler.ctx.stroke();\n\n // store the current point in the drawing path\n this.currentPath.push({\n x: mouseX,\n y: mouseY,\n color: color,\n brushSize: this.canvasHandler.brushHandler.currentBrushSize,\n });\n }\n\n stopDrawing() {\n if (this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked)\n this.currentPath.isErase = true;\n if (this.isDrawing) {\n this.canvasHandler.undoAndRedoHandler.drawnPaths.push(this.currentPath); // if currently drawing, save the current path to the stack (for undo feature)\n this.isDrawing = false;\n }\n }\n}\n\nexport default DrawingHandler;\n","class ColorHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler\n this.setupColorHandling()\n }\n\n setupColorHandling() {\n this.currentColor = \"black\";\n\n // if a brush color has been selected..\n this.brushColorPicker = document.getElementById(\"color-picker\");\n this.brushColorPicker.addEventListener(\"input\", () => {\n this.currentColor = this.brushColorPicker.value;\n });\n\n // if a bg color has been selected..\n this.bgColorPicker = document.getElementById(\"background-color-picker\");\n\n // for erase action\n this.bgColorPicker.addEventListener(\n \"input\",\n () => {\n const drawnPaths = this.canvasHandler.undoAndRedoHandler.drawnPaths;\n const redoStack = this.canvasHandler.undoAndRedoHandler.redoStack;\n this.canvasHandler.eraseAndClearHandler.clear();\n this.canvasHandler.undoAndRedoHandler.drawnPaths = drawnPaths;\n this.canvasHandler.undoAndRedoHandler.redoStack = redoStack;\n this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((path) =>\n this.canvasHandler.undoAndRedoHandler.redrawPath(path)\n );\n this.canvasHandler.canvas.style.backgroundColor = this.bgColorPicker.value;\n }\n );\n }\n}\n\nexport default ColorHandler","class BrushHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupBrushSize();\n }\n\n setupBrushSize() {\n this.brushSizeInput = document.getElementById(\"size-slider\");\n this.brushSizeInput.addEventListener(\"input\", () => this.updateBrushSize());\n this.currentBrushSize = 5;\n }\n\n setBrushStyling(\n color = this.canvasHandler.colorHandler.currentColor,\n brushSize = this.currentBrushSize\n ) {\n this.canvasHandler.ctx.lineCap = \"round\";\n this.canvasHandler.ctx.lineWidth = brushSize;\n this.canvasHandler.ctx.strokeStyle = color;\n }\n\n updateBrushSize() {\n this.currentBrushSize = parseInt(this.brushSizeInput.value);\n this.setBrushStyling();\n }\n}\n\nexport default BrushHandler;\n","class EraseAndClearHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupEraser();\n this.setupClearBtn();\n }\n\n setupClearBtn() {\n this.clearBtn = document.getElementById(\"clear\");\n this.clearBtn.addEventListener(\"click\", () => this.clear());\n }\n\n setupEraser() {\n this.eraserCheckbox = document.getElementById(\"eraser\");\n }\n\n clear() {\n this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height);\n this.canvasHandler.canvas.style.backgroundColor = \"white\";\n this.canvasHandler.undoAndRedoHandler.redoStack = [];\n this.canvasHandler.undoAndRedoHandler.drawnPaths = [];\n }\n}\n\nexport default EraseAndClearHandler;","class UndoAndRedoHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupUndoBtn()\n this.setupRedoBtn()\n }\n\n setupUndoBtn() {\n this.drawnPaths = [];\n this.undoBtn = document.getElementById(\"undo\");\n this.undoBtn.addEventListener(\"click\", () => this.undo());\n }\n\n setupRedoBtn() {\n this.redoStack = [];\n this.redoBtn = document.getElementById(\"redo\");\n this.redoBtn.addEventListener(\"click\", () => this.redo());\n }\n\n undo() {\n // if there are paths in the stack\n if (this.drawnPaths.length > 0) {\n // clear canvas (to prep for redraw)\n this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height);\n\n // remove (undo) last drawn path from the stack\n const undonePath = this.drawnPaths.pop();\n // push the undone path to redo stack\n this.redoStack.push(undonePath);\n\n // redraw all paths that are still in the stack\n this.drawnPaths.forEach((path) => this.redrawPath(path));\n }\n }\n\n redrawPath(path) {\n path.forEach((point, idx) => {\n // if it's the starting point of the path\n if (idx === 0) {\n // move to the starting point\n this.canvasHandler.ctx.beginPath();\n this.canvasHandler.ctx.moveTo(point.x, point.y);\n } else {\n // draw a line to the next point\n this.canvasHandler.ctx.lineTo(point.x, point.y);\n\n // set brush styling based on point clr & brush size\n if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColorPicker.value;\n this.canvasHandler.brushHandler.setBrushStyling(point.color, point.brushSize);\n\n this.canvasHandler.ctx.stroke();\n }\n });\n }\n\n redo() {\n // if there are paths in the redo stack\n if (this.redoStack.length > 0) {\n // clear canvas (to prep for redraw)\n this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height);\n\n // remove (redo) last undone path from the redo stack\n const redonePath = this.redoStack.pop();\n // push the redone path to drawnPaths stack\n this.drawnPaths.push(redonePath);\n\n // redraw all paths with the correct color\n this.drawnPaths.forEach((path) => this.redrawPath(path));\n }\n }\n}\n\nexport default UndoAndRedoHandler;\n","class DownloadHandler {\n constructor(canvasHandler) {\n this.canvasHandler = canvasHandler;\n this.setupDownloadBtn()\n }\n\n setupDownloadBtn() {\n this.downloadBtn = document.getElementById(\"download\");\n this.downloadBtn.addEventListener(\"click\", () => this.download());\n }\n\n download() {\n // create a temp canvas to preserve the background (wo this the bg would be transparent)\n const tempCanvas = document.createElement(\"canvas\");\n const tempCtx = tempCanvas.getContext(\"2d\");\n tempCanvas.width = this.canvasHandler.canvas.width;\n tempCanvas.height = this.canvasHandler.canvas.height;\n\n // set the background color on the temp canvas\n tempCtx.fillStyle = this.canvasHandler.canvas.style.backgroundColor;\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n\n // draw the existing canvas content on top of the background\n tempCtx.drawImage(this.canvasHandler.canvas, 0, 0);\n\n // get the data URL of the temp canvas\n const dataUrl = tempCanvas.toDataURL(\"image/png\");\n\n // create a link ele for download\n const link = document.createElement(\"a\");\n link.href = dataUrl;\n link.download = \"canvas.png\";\n\n // trigger the download\n link.click();\n }\n}\n\nexport default DownloadHandler;","import DrawingHandler from \"./drawingHandler\";\nimport ColorHandler from \"./colorHandler\";\nimport BrushHandler from \"./brushHandler\";\nimport EraseAndClearHandler from \"./eraseAndClearHandler\";\nimport UndoAndRedoHandler from \"./undoAndRedoHandler\";\nimport DownloadHandler from \"./downloadHandler\";\n\nclass CanvasHandler {\n constructor() {\n this.setupCanvas();\n this.setupCanvasProportions();\n\n this.drawingHandler = new DrawingHandler(this);\n this.colorHandler = new ColorHandler(this);\n this.brushHandler = new BrushHandler(this);\n this.eraseAndClearHandler = new EraseAndClearHandler(this);\n this.undoAndRedoHandler = new UndoAndRedoHandler(this);\n this.downloadHandler = new DownloadHandler(this);\n }\n\n setupCanvas() {\n this.canvas = document.getElementById(\"canvas\");\n this.ctx = this.canvas.getContext(\"2d\");\n this.isDrawing = false;\n }\n\n setupCanvasProportions() {\n const topMargin = 100;\n const bottomMargin = 100;\n\n this.canvas.style.position = \"absolute\";\n this.canvas.style.top = topMargin + \"px\";\n\n this.canvas.height = window.innerHeight - topMargin - bottomMargin;\n this.canvas.width = window.innerWidth;\n }\n}\n\nexport default CanvasHandler;\n","class ToolIcon {\n constructor() {\n this.brushRadio = document.getElementById(\"brush\");\n this.eraserRadio = document.getElementById(\"eraser\");\n this.brushLabel = document.querySelector('label[for=\"brush\"]');\n this.eraserLabel = document.querySelector('label[for=\"eraser\"]');\n this.detectChange();\n this.updateIcon();\n }\n\n updateIcon() {\n // update brush icon based on whether the brush is checked\n this.brushLabel.querySelector(\"img\").src = this.brushRadio.checked\n ? \"assets/tab-icon.png\"\n : \"assets/menu icons/not-active-brush.png\";\n\n // update eraser icon based on whether the eraser is checked\n this.eraserLabel.querySelector(\"img\").src = this.eraserRadio.checked\n ? \"assets/menu icons/active-eraser.png\"\n : \"assets/menu icons/not-active-eraser.png\";\n }\n\n detectChange() {\n // update icon clr when tool is changed\n [this.brushRadio, this.eraserRadio].forEach((radio) => {\n radio.addEventListener(\"change\", () => this.updateIcon());\n });\n }\n}\n\nexport default ToolIcon;\n","import CanvasHandler from \"./scripts/canvasHandler\";\nimport ToolIcon from \"./scripts/toolIcon\";\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new CanvasHandler();\n new ToolIcon();\n});\n\n\n\n\n\n\n\n\n"],"names":["constructor","canvasHandler","this","setupDrawingEventListeners","canvas","addEventListener","e","startDrawing","draw","stopDrawing","isDrawing","currentPath","redoStack","canvasMouseX","clientX","offsetLeft","canvasMouseY","clientY","offsetTop","ctx","beginPath","moveTo","push","x","y","color","colorHandler","currentColor","brushSize","brushHandler","currentBrushSize","mouseX","mouseY","lineTo","eraseAndClearHandler","eraserCheckbox","checked","bgColorPicker","value","setBrushStyling","stroke","isErase","undoAndRedoHandler","drawnPaths","setupColorHandling","brushColorPicker","document","getElementById","clear","forEach","path","redrawPath","style","backgroundColor","setupBrushSize","brushSizeInput","updateBrushSize","arguments","length","undefined","lineCap","lineWidth","strokeStyle","parseInt","setupEraser","setupClearBtn","clearBtn","clearRect","width","height","setupUndoBtn","setupRedoBtn","undoBtn","undo","redoBtn","redo","undonePath","pop","point","idx","redonePath","setupDownloadBtn","downloadBtn","download","tempCanvas","createElement","tempCtx","getContext","fillStyle","fillRect","drawImage","dataUrl","toDataURL","link","href","click","setupCanvas","setupCanvasProportions","drawingHandler","DrawingHandler","ColorHandler","BrushHandler","EraseAndClearHandler","UndoAndRedoHandler","downloadHandler","DownloadHandler","position","top","topMargin","window","innerHeight","innerWidth","brushRadio","eraserRadio","brushLabel","querySelector","eraserLabel","detectChange","updateIcon","src","radio","CanvasHandler","ToolIcon"],"sourceRoot":""} \ No newline at end of file diff --git a/src/scripts/canvasHandler.js b/src/scripts/canvasHandler.js index 37ec1c8..a43daac 100644 --- a/src/scripts/canvasHandler.js +++ b/src/scripts/canvasHandler.js @@ -1,24 +1,23 @@ import DrawingHandler from "./drawingHandler"; import ColorHandler from "./colorHandler"; import BrushHandler from "./brushHandler"; -import UndoAndRedoHandler from "./UndoAndRedoHandler"; +import EraseAndClearHandler from "./eraseAndClearHandler"; +import UndoAndRedoHandler from "./undoAndRedoHandler"; import DownloadHandler from "./downloadHandler"; class CanvasHandler { constructor() { this.setupCanvas(); this.setupCanvasProportions(); - this.setupEraser(); - this.setupClearBtn(); this.drawingHandler = new DrawingHandler(this); this.colorHandler = new ColorHandler(this); this.brushHandler = new BrushHandler(this); + this.eraseAndClearHandler = new EraseAndClearHandler(this); this.undoAndRedoHandler = new UndoAndRedoHandler(this); this.downloadHandler = new DownloadHandler(this); } - // setting up the canvas setupCanvas() { this.canvas = document.getElementById("canvas"); this.ctx = this.canvas.getContext("2d"); @@ -35,23 +34,6 @@ class CanvasHandler { this.canvas.height = window.innerHeight - topMargin - bottomMargin; this.canvas.width = window.innerWidth; } - - setupClearBtn() { - this.clearBtn = document.getElementById("clear"); - this.clearBtn.addEventListener("click", () => this.clear()); - } - - setupEraser() { - this.eraserCheckbox = document.getElementById("eraser"); - } - - // btn actions - clear() { - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.canvas.style.backgroundColor = "white"; - this.redoStack = []; - this.drawnPaths = []; - } } export default CanvasHandler; diff --git a/src/scripts/colorHandler.js b/src/scripts/colorHandler.js index dff085f..b44d29a 100644 --- a/src/scripts/colorHandler.js +++ b/src/scripts/colorHandler.js @@ -22,7 +22,7 @@ class ColorHandler { () => { const drawnPaths = this.canvasHandler.undoAndRedoHandler.drawnPaths; const redoStack = this.canvasHandler.undoAndRedoHandler.redoStack; - this.canvasHandler.clear() + this.canvasHandler.eraseAndClearHandler.clear(); this.canvasHandler.undoAndRedoHandler.drawnPaths = drawnPaths; this.canvasHandler.undoAndRedoHandler.redoStack = redoStack; this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((path) => diff --git a/src/scripts/drawingHandler.js b/src/scripts/drawingHandler.js index eb362c2..b36a1c6 100644 --- a/src/scripts/drawingHandler.js +++ b/src/scripts/drawingHandler.js @@ -52,7 +52,7 @@ class DrawingHandler { this.canvasHandler.ctx.lineTo(mouseX, mouseY); // Set brush styling based on whether eraser or brush is checked - const color = this.canvasHandler.eraserCheckbox.checked + const color = this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked ? this.canvasHandler.colorHandler.bgColorPicker.value : this.canvasHandler.colorHandler.currentColor; @@ -74,7 +74,7 @@ class DrawingHandler { } stopDrawing() { - if (this.canvasHandler.eraserCheckbox.checked) + if (this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked) this.currentPath.isErase = true; if (this.isDrawing) { this.canvasHandler.undoAndRedoHandler.drawnPaths.push(this.currentPath); // if currently drawing, save the current path to the stack (for undo feature) diff --git a/src/scripts/eraseAndClearHandler.js b/src/scripts/eraseAndClearHandler.js new file mode 100644 index 0000000..25f4e0b --- /dev/null +++ b/src/scripts/eraseAndClearHandler.js @@ -0,0 +1,25 @@ +class EraseAndClearHandler { + constructor(canvasHandler) { + this.canvasHandler = canvasHandler; + this.setupEraser(); + this.setupClearBtn(); + } + + setupClearBtn() { + this.clearBtn = document.getElementById("clear"); + this.clearBtn.addEventListener("click", () => this.clear()); + } + + setupEraser() { + this.eraserCheckbox = document.getElementById("eraser"); + } + + clear() { + this.canvasHandler.ctx.clearRect(0, 0, this.canvasHandler.canvas.width, this.canvasHandler.canvas.height); + this.canvasHandler.canvas.style.backgroundColor = "white"; + this.canvasHandler.undoAndRedoHandler.redoStack = []; + this.canvasHandler.undoAndRedoHandler.drawnPaths = []; + } +} + +export default EraseAndClearHandler; \ No newline at end of file