Skip to content

Commit b77190c

Browse files
solygambassolygambas
committed
add drawing app
1 parent 5bc6a33 commit b77190c

File tree

5 files changed

+142
-2
lines changed

5 files changed

+142
-2
lines changed

‎19-theme clock/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ body {
4141
padding: 8px 12px;
4242
position: absolute;
4343
top: 10px;
44+
right: 10px;
4445
cursor: pointer;
4546
}
4647

‎22-drawing app/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Drawing App</title>
8+
</head>
9+
<body>
10+
<canvas id="canvas" width="800" height="700"></canvas>
11+
<div class="toolbox">
12+
<button id="decrease">-</button>
13+
<span id="size">10</span>
14+
<button id="increase">+</button>
15+
<input type="color" id="color" />
16+
<button id="clear">X</button>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎22-drawing app/script.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
// Ref: https://developer.mozilla.org/fr/docs/Web/API/Canvas_API
2+
const canvas = document.getElementById("canvas");
3+
const increaseButton = document.getElementById("increase");
4+
const decreaseButton = document.getElementById("decrease");
5+
const sizeElement = document.getElementById("size");
6+
const colorElement = document.getElementById("color");
7+
const clearElement = document.getElementById("clear");
8+
const ctx = canvas.getContext("2d");
9+
10+
let size = 10;
11+
let color = "black";
12+
let x;
13+
let y;
14+
let isPressed = false;
15+
16+
const drawCircle = (x, y) => {
17+
ctx.beginPath();
18+
ctx.arc(x, y, size, 0, Math.PI * 2);
19+
ctx.fillStyle = color;
20+
ctx.fill();
21+
};
22+
23+
const drawLine = (x1, y1, x2, y2) => {
24+
ctx.beginPath();
25+
ctx.moveTo(x1, y1);
26+
ctx.lineTo(x2, y2);
27+
ctx.strokeStyle = color;
28+
ctx.lineWidth = size * 2;
29+
ctx.stroke();
30+
};
31+
32+
const updateSizeOnScreen = () => (sizeElement.innerText = size);
33+
34+
canvas.addEventListener("mousedown", (e) => {
35+
isPressed = true;
36+
x = e.offsetX;
37+
y = e.offsetY;
38+
});
39+
40+
canvas.addEventListener("mouseup", (e) => {
41+
isPressed = false;
42+
x = undefined;
43+
y = undefined;
44+
});
45+
46+
canvas.addEventListener("mousemove", (e) => {
47+
if (isPressed) {
48+
x2 = e.offsetX;
49+
y2 = e.offsetY;
50+
drawCircle(x2, y2);
51+
drawLine(x, y, x2, y2);
52+
x = x2;
53+
y = y2;
54+
}
55+
});
56+
57+
increaseButton.addEventListener("click", () => {
58+
size += 5;
59+
if (size > 50) size = 50;
60+
updateSizeOnScreen();
61+
});
62+
63+
decreaseButton.addEventListener("click", () => {
64+
size -= 5;
65+
if (size < 5) size = 5;
66+
updateSizeOnScreen();
67+
});
68+
69+
colorElement.addEventListener("change", (e) => (color = e.target.value));
70+
71+
clearElement.addEventListener("click", () =>
72+
ctx.clearRect(0, 0, canvas.width, canvas.height)
73+
);

‎22-drawing app/style.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f5f5f5;
9+
font-family: "Roboto", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
margin: 0;
16+
}
17+
18+
canvas {
19+
border: 2px solid steelblue;
20+
}
21+
22+
.toolbox {
23+
background-color: steelblue;
24+
border: 1px solid slateblue;
25+
display: flex;
26+
width: 804px;
27+
padding: 1rem;
28+
}
29+
30+
.toolbox > * {
31+
background-color: #fff;
32+
border: none;
33+
display: inline-flex;
34+
align-items: center;
35+
justify-content: center;
36+
font-size: 2rem;
37+
height: 50px;
38+
width: 50px;
39+
margin: 0.25rem;
40+
padding: 0.25rem;
41+
cursor: pointer;
42+
}
43+
44+
.toolbox > *:last-child {
45+
margin-left: auto;
46+
}

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/pen/OJRrVbJ) |
2727
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/pen/MWjZrZy) |
2828
| 20 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/20-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/pen/oNzJdWw) |
29-
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/21-dragn%20nn%20drop) | [Live Demo](https://codepen.io/solygambas/pen/RwGEyme) |
30-
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/drawing-app) | [Live Demo](/drawing-app/) |
29+
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/21-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/pen/RwGEyme) |
30+
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/22-drawing%20app) | [Live Demo](https://codepen.io/solygambas/pen/wvzREMx) |
3131
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/kinetic-loader) | [Live Demo](/kinetic-loader/) |
3232
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/content-placeholder) | [Live Demo](/content-placeholder/) |
3333
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/sticky-navigation) | [Live Demo](/sticky-navbar/) |

0 commit comments

Comments
 (0)