Skip to content

added functionality to buttons #5

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

Open
nikhil12377 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added functionality to buttons #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
87 changes: 57 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Canvas</title>
</head>
<body>
<nav class="navbar navbar-light bg-light mynav">
<form class="form-inline mx-auto">
<button class="" type="button">Pen</button>
<button class="" type="button">Erasor</button>
<button class="" type="button">Change color</button>
<button class="" type="button">size of pen</button>
</form>
</nav>
<canvas id="canvas"></canvas>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<link rel="stylesheet" href="./style.css">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>

<body>

<header>
<h1>White Board</h1>
<!-- <img src="board.jpg" alt="board1.jpg"> -->
</header>
<canvas id="canvas"></canvas>
<div class="control">
<div class="button">
<button style='font-size:14px' class="brush"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-brush" viewBox="0 0 16 16">
<path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z"/>
</svg><i class='fa fa-paint-brush'></i></button>

<button style='font-size:24px'><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-eraser-fill eraser" viewBox="0 0 16 16">
<path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm.66 11.34L3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/>
</svg><i class="fa fa-eraser"></i></button>
</div>
<div class="size">
<label for="pen-size">Size</label>
<input type="range" class="pensize" id="pen-size" min="1" max="50" size="30px">
</div>
<div class="color-field wt" style="background-color: white;"></div>
<div class="color-field bl" style="background-color: black;"></div>
<div class="color-field rd" style="background-color: red;"></div>
<div class="color-field blu" style="background-color:blue;"></div>
<div class="color-field gr" style="background-color: green;"></div>
<div class="color-field ye" style="background-color: yellow;"></div>

<div class="color">
<label for="pen-color">Color</label>
<input type="color" class="pencolor" style='font-size: 20px;'id="pen-color" >
</div>
<div class="actions">
<button id="reset-canvas">Reset</button>
<button id="save-canvas">Save</button>
</div>








<script src="script.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
</body>

</html>
116 changes: 110 additions & 6 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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;
});



68 changes: 64 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; */
}