Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear canvas #15

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Clear canvas #15

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
748a248
Added clear canvas button
maglionaire Oct 8, 2022
f0dee22
fix: conflict
maglionaire Oct 8, 2022
ee3952e
fix: conflict
maglionaire Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 101 additions & 79 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,130 @@
const canvas = document.querySelector("canvas"),
toolBtns = document.querySelectorAll(".tool"),
fillColor = document.querySelector("#fill-color"),
sizeSlider = document.querySelector("#size-slider"),
colorBtns = document.querySelectorAll(".colors .option"),
colorPicker = document.querySelector("#color-picker"),
toolBtns = document.querySelectorAll(".tool"),
fillColor = document.querySelector("#fill-color"),
sizeSlider = document.querySelector("#size-slider"),
colorBtns = document.querySelectorAll(".colors .option"),
colorPicker = document.querySelector("#color-picker"),
clearCanvasBtn = document.querySelector("#clear-canvas");
ctx = canvas.getContext("2d");

// global variables with default values
let prevMouseX, prevMouseY, snapshot,
isDrawing = false,
selectedTool = "brush",
brushWidth = 5,
selectedColor = "#000";
let prevMouseX,
prevMouseY,
snapshot,
isDrawing = false,
selectedTool = "brush",
brushWidth = 5,
selectedColor = "#000";

window.addEventListener("load", () => {
//setting canvas width and height // offsetWidth/Height returns viewable width/height of an element
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
//setting canvas width and height // offsetWidth/Height returns viewable width/height of an element
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
});

const drawRect = (e) => {
// if fill color is not checked then draw a rect with border else draw rect with background
if(!fillColor.checked) {
// creating a circle according to the mouse pointer
return ctx.strokeRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);
}
ctx.fillRect(e.offsetX, e.offsetY, prevMouseX - e.offsetX, prevMouseY - e.offsetY);
}
// if fill color is not checked then draw a rect with border else draw rect with background
if (!fillColor.checked) {
// creating a circle according to the mouse pointer
return ctx.strokeRect(
e.offsetX,
e.offsetY,
prevMouseX - e.offsetX,
prevMouseY - e.offsetY
);
}
ctx.fillRect(
e.offsetX,
e.offsetY,
prevMouseX - e.offsetX,
prevMouseY - e.offsetY
);
};

const drawCircle = (e) => {
ctx.beginPath(); //creating a new path to draw circle
// getting radius for circle according to the mouse pointer
let radius = Math.sqrt(Math.pow((prevMouseX - e.offsetX), 2) + Math.pow((prevMouseY - e.offsetY), 2));
ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI); //creating circle according to the mouse pointer
ctx.stroke();
fillColor.checked ? ctx.fill() : ctx.stroke(); //if fillColor is checked fill circle else draw border circle
}
ctx.beginPath(); //creating a new path to draw circle
// getting radius for circle according to the mouse pointer
let radius = Math.sqrt(
Math.pow(prevMouseX - e.offsetX, 2) + Math.pow(prevMouseY - e.offsetY, 2)
);
ctx.arc(prevMouseX, prevMouseY, radius, 0, 2 * Math.PI); //creating circle according to the mouse pointer
ctx.stroke();
fillColor.checked ? ctx.fill() : ctx.stroke(); //if fillColor is checked fill circle else draw border circle
};

const drawTriangle = (e) => {
ctx.beginPath(); //creating new path to draw circle
ctx.moveTo(prevMouseX, prevMouseY); // moving triangle to the mouse pointer
ctx.lineTo(e.offsetX, e.offsetY); // creating first line according to the mouse pointer
ctx.lineTo(prevMouseX * 2 - e.offsetX, e.offsetY); // creating bottom line of the triangle
ctx.closePath(); // closing path of the triangle so the third line draw automatically
ctx.stroke();
fillColor.checked ? ctx.fill() : ctx.stroke(); //if fillColor is checked fill circle else draw border triangle
}
ctx.beginPath(); //creating new path to draw circle
ctx.moveTo(prevMouseX, prevMouseY); // moving triangle to the mouse pointer
ctx.lineTo(e.offsetX, e.offsetY); // creating first line according to the mouse pointer
ctx.lineTo(prevMouseX * 2 - e.offsetX, e.offsetY); // creating bottom line of the triangle
ctx.closePath(); // closing path of the triangle so the third line draw automatically
ctx.stroke();
fillColor.checked ? ctx.fill() : ctx.stroke(); //if fillColor is checked fill circle else draw border triangle
};

const startDraw = (e) => {
isDrawing = true;
prevMouseX = e.offsetX; //passing current MouseX position as prevMouseX value
prevMouseY = e.offsetY; //passing current MouseY position as prevMouseY value
ctx.beginPath(); //creating new path to draw
ctx.lineWidth = brushWidth; //passing brushSize as line width
snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); //coping canvas data and passing as snapshot value.. this avoids dragging the image
ctx.strokeStyle = selectedColor; // passing selectedColor as stroke syle
ctx.fillStyle = selectedColor; // passing selectedColor as fill style
}
isDrawing = true;
prevMouseX = e.offsetX; //passing current MouseX position as prevMouseX value
prevMouseY = e.offsetY; //passing current MouseY position as prevMouseY value
ctx.beginPath(); //creating new path to draw
ctx.lineWidth = brushWidth; //passing brushSize as line width
snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); //coping canvas data and passing as snapshot value.. this avoids dragging the image
ctx.strokeStyle = selectedColor; // passing selectedColor as stroke syle
ctx.fillStyle = selectedColor; // passing selectedColor as fill style
};

const drawing = (e) => {
if(!isDrawing) return; //if isDrawing is flase return form here
ctx.putImageData(snapshot, 0, 0); //adding the copied canvas on to this canvas
if (!isDrawing) return; //if isDrawing is flase return form here
ctx.putImageData(snapshot, 0, 0); //adding the copied canvas on to this canvas

if(selectedTool === "brush" || selectedTool === "eraser"){
ctx.strokeStyle = selectedTool === "eraser" ? "#fff" : selectedColor; //if selected tool is eraser then set strokeStyle to white to paint white color onto the existing canvas content else set the stroke color to selected color
ctx.lineTo(e.offsetX, e.offsetY); //creating line according to the mouse pointer
ctx.stroke(); //drawin/filling line with color
} else if (selectedTool === "rectangle"){
drawRect(e);
}else if (selectedTool === "circle"){
drawCircle(e);
}else {
drawTriangle(e);
}
}
if (selectedTool === "brush" || selectedTool === "eraser") {
ctx.strokeStyle = selectedTool === "eraser" ? "#fff" : selectedColor; //if selected tool is eraser then set strokeStyle to white to paint white color onto the existing canvas content else set the stroke color to selected color
ctx.lineTo(e.offsetX, e.offsetY); //creating line according to the mouse pointer
ctx.stroke(); //drawin/filling line with color
} else if (selectedTool === "rectangle") {
drawRect(e);
} else if (selectedTool === "circle") {
drawCircle(e);
} else {
drawTriangle(e);
}
};

toolBtns.forEach(btn => {
btn.addEventListener("click", () => { //adding click event to all tool option
// removing active class from the pervious option and adding on current clicked option
document.querySelector(".options .active").classList.remove("active");
btn.classList.add("active");
selectedTool = btn.id;
console.log(btn.id);
});
toolBtns.forEach((btn) => {
btn.addEventListener("click", () => {
//adding click event to all tool option
// removing active class from the pervious option and adding on current clicked option
document.querySelector(".options .active").classList.remove("active");
btn.classList.add("active");
selectedTool = btn.id;
console.log(btn.id);
});
});

sizeSlider.addEventListener("change", () => brushWidth = sizeSlider.value); //passin slider value as brush Size

colorBtns.forEach(btn => {
btn.addEventListener("click", () => { // adding click event to all color button
// removing active class from the previous option and adding on current clicked option
document.querySelector(".options .selected").classList.remove("selected");
btn.classList.add("selected");
// passing selected btn background as selectedColor value
selectedColor = window.getComputedStyle(btn).getPropertyValue("background-color");
});
sizeSlider.addEventListener("change", () => (brushWidth = sizeSlider.value)); //passin slider value as brush Size

colorBtns.forEach((btn) => {
btn.addEventListener("click", () => {
// adding click event to all color button
// removing active class from the previous option and adding on current clicked option
document.querySelector(".options .selected").classList.remove("selected");
btn.classList.add("selected");
// passing selected btn background as selectedColor value
selectedColor = window
.getComputedStyle(btn)
.getPropertyValue("background-color");
});
});

colorPicker.addEventListener("change", () => {
colorPicker.parentElement.style.background = colorPicker.value;
colorPicker.parentElement.click();
colorPicker.parentElement.style.background = colorPicker.value;
colorPicker.parentElement.click();
});

canvas.addEventListener("mousedown", startDraw);
canvas.addEventListener("mousemove", drawing);
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mouseup", () => (isDrawing = false));

clearCanvasBtn.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});