Skip to content

Harshal #7

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
harshal-99 wants to merge 25 commits into
base: master
Choose a base branch
from
Open

Harshal #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
e5727fd
Initial commit.
harshal-99 Jul 4, 2021
f49abb0
Commit by Ayan Ahmad.
harshal-99 Jul 4, 2021
e4695e2
Changed font awesome link.
harshal-99 Jul 4, 2021
11bb40c
fixed some errors.
harshal-99 Jul 4, 2021
0a1e80e
fixed some errors.
harshal-99 Jul 4, 2021
1e5ecdb
fixed some errors.
harshal-99 Jul 4, 2021
918e9c3
Deleted colors div .
harshal-99 Jul 5, 2021
1ec48a4
Mapped color/size change.
harshal-99 Jul 5, 2021
0a6c956
Fixed some errors
harshal-99 Jul 5, 2021
6c37bbc
Merge branch 'master' of github.com:Amankumar1602/Canvas
harshal-99 Jul 5, 2021
0795a4b
Fixed some errors and closed unclosed tags.
harshal-99 Jul 5, 2021
af23d8b
Fixed some errors and closed unclosed tags.
harshal-99 Jul 5, 2021
6c02003
Merge branch 'master' into harshal
harshal-99 Jul 5, 2021
75f2c42
Removed br and button tags
harshal-99 Jul 5, 2021
1c5a8fc
Radio btn, background color done and reset.
harshal-99 Jul 5, 2021
43fec02
Aligned btns using flex.
harshal-99 Jul 5, 2021
b8a9793
Merge branch 'master' of github.com:Amankumar1602/Canvas
harshal-99 Jul 5, 2021
9a37fd9
Fixed typos.
harshal-99 Jul 5, 2021
4f8bf4f
Merge branch 'master' into harshal
harshal-99 Jul 5, 2021
c8d3942
Set erase color to white after reset.
harshal-99 Jul 5, 2021
2ee988a
Fixed some errors.
harshal-99 Jul 5, 2021
bdfab3a
Added button for straight line.
harshal-99 Jul 5, 2021
48039da
Removed Straight line button.
harshal-99 Jul 5, 2021
69c2a87
Removed save button.
harshal-99 Jul 5, 2021
436748d
Removed save button.
harshal-99 Jul 5, 2021
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
Binary file added images/board.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/board1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 68 additions & 59 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,72 +6,81 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="./script.js"></script>
<link rel="stylesheet" href="./style.css">
</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" style="margin-left: 10px;">

<button class="but">Pen<br><input type="radio" name="pen-type" id="pen-pencil" checked>
<label for="pen-pencil"><br><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 class="but">Pencil<br><input type="radio" name="pen-type" id="pen-pencil" checked>
<label for="pen-pencil"><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg><i class="bi bi-pencil-fill"></i></button>

<button class="but">Eraser<br><input type="radio" name="pen-type" id="pen-pencil" checked>
<label for="pen-pencil"><br><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-eraser-fill" 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 class="actions" style="margin-left: 5px;">
<button id="line">Stright line<br><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slash-lg" viewBox="0 0 16 16">
<path d="M14.707 1.293a1 1 0 0 1 0 1.414l-12 12a1 1 0 0 1-1.414-1.414l12-12a1 1 0 0 1 1.414 0z"/>
</svg><i class="bi bi-slash-lg"></i></button></div>

</div>

<div class="size">
<label for="pen-size">Pen_Size</label><br>
<input type="range" id="pen-size" min="1" max="50" size="30px">
</div>
<div class="size">
<label for="pen-size">Eraser_Size</label><br>
<input type="range" id="pen-size" min="1" max="50" size="30px">
<header>
<h1>White Board</h1>
</header>
<canvas id="canvas"></canvas>
<div class="control">
<div class="button">
<div>
<input type="radio" name="pen-type" id="pen" value="pen" checked>
<label for="pen">Pen
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" 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>
</label>
</div>

<section class="col">
<details open>
<summary>Color_Box</summary>
<p>
<div class="color-field" style="background-color: black;"></div>
<div class="color-field" style="background-color: red;"></div>
<div class="color-field" style="background-color:blue;"></div>
<div class="color-field" style="background-color: green;"></div>
<div class="color-field" style="background-color: yellow;"></div></p>
</details>
</section>

<div class="color" style="margin-left: 10px;">
<label for="pen-color">Color</label>
<input type="color" style='font-size: 20px;'id="pen-color" value="#000">

<div>
<input type="radio" name="pen-type" id="pencil" value="pencil">
<label for="pencil">Pencil
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-pencil-fill"
viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
<i class="bi bi-pencil-fill"></i>
</label>
</div>
<div class="actions" style="margin-left: 10px;">
<button id="reset-canvas">Reset</button>
<button id="save-canvas">Save</button>
<div>
<input type="radio" name="pen-type" id="eraser" value="eraser">
<label for="eraser">Eraser
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-eraser-fill"
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>
</label>
</div>
</div>
</div>

<div class="size">
<label for="pen-size">Pen Size</label>
<input type="range" id="pen-size" min="1" max="50" size="30px">
</div>
<div class="size">
<label for="eraser-size">Eraser Size</label>
<input type="range" id="eraser-size" min="1" max="50" size="30px">
</div>

<section class="col">
<details open>
<summary>Color_Box</summary>
<div class="color-field" style="background-color: black;"></div>
<div class="color-field" style="background-color: red;"></div>
<div class="color-field" style="background-color:blue;"></div>
<div class="color-field" style="background-color: green;"></div>
<div class="color-field" style="background-color: yellow;"></div>
</details>
</section>

<div class="color" style="margin-left: 10px;">
<label for="pen-color">Color</label>
<input type="color" style="font-size: 20px;" id="pen-color" value="#000">
</div>
<div class="actions" style="margin-left: 10px;">
<button id="reset-canvas">Reset</button>
</div>
</div>


</body>
</html>
128 changes: 81 additions & 47 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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);
Expand All @@ -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;
});
})
});
24 changes: 15 additions & 9 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@
header{
background-color: blanchedalmond;
text-align: center;
font-size: xx-larger;
font-size: x-large;
height: 20%;
width: auto;
}
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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -85,3 +86,8 @@ body{
border-radius: 5px;
width: auto;
}

.button {
display: flex;
justify-content: space-evenly;
}