Skip to content

Commit 05ace62

Browse files
adamkiadamki
committed
drawing on canvas
1 parent 938c415 commit 05ace62

File tree

3 files changed

+154
-92
lines changed

3 files changed

+154
-92
lines changed

‎08 - Fun with HTML5 Canvas/index-FINISHED.html‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎08 - Fun with HTML5 Canvas/index-START.html‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎08 - Fun with HTML5 Canvas/index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html> <html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<title>HTML5 Canvas</title>
5+
</head>
6+
<body>
7+
<div class="switch-container">
8+
<h3>Erase?</h3>
9+
<label class="switch">
10+
<input type="checkbox">
11+
<div class="slider round"></div>
12+
</label>
13+
</div>
14+
<canvas id="draw" width="800" height="800"></canvas>
15+
16+
17+
<script>
18+
const toggle = document.querySelector('input');
19+
const canvas = document.querySelector('canvas');
20+
const ctx = canvas.getContext('2d');
21+
22+
canvas.width = window.innerWidth;
23+
canvas.height = window.innerHeight;
24+
25+
ctx.strokeStyle = '#BADA55';
26+
ctx.lineJoin = 'round';
27+
ctx.lineCap = 'round';
28+
ctx.lineWidth = 20;
29+
30+
let isDrawing = false;
31+
let lastX = 0;
32+
let lastY = 0;
33+
let hue = 0;
34+
let direction = true;
35+
let isGCO = toggle.checked;
36+
37+
function draw(e) {
38+
if (!isDrawing) return;
39+
console.log(e);
40+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
41+
ctx.beginPath();
42+
ctx.moveTo(lastX, lastY);
43+
ctx.lineTo(e.offsetX, e.offsetY);
44+
ctx.stroke();
45+
[lastX, lastY] = [e.offsetX, e.offsetY];
46+
47+
hue ++
48+
49+
if (ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
50+
direction = !direction;
51+
}
52+
53+
console.log(ctx.lineWidth);
54+
if (direction) {
55+
ctx.lineWidth ++
56+
} else {
57+
ctx.lineWidth --
58+
}
59+
}
60+
61+
function handleToggle(e) {
62+
if (isGCO) {
63+
ctx.globalCompositeOperation = 'destination-out';
64+
} else {
65+
ctx.globalCompositeOperation = '';
66+
}
67+
isGCO = !isGCO;
68+
}
69+
70+
canvas.addEventListener('mousedown', (e) => {
71+
isDrawing = true;
72+
[lastX, lastY] = [e.offsetX, e.offsetY];
73+
});
74+
75+
canvas.addEventListener('mousemove', draw);
76+
canvas.addEventListener('mouseup', () => isDrawing = false);
77+
canvas.addEventListener('mouseout', () => isDrawing = false);
78+
toggle.addEventListener('change', (e) => handleToggle(e));
79+
80+
</script>
81+
82+
<style>
83+
html, body {
84+
margin:0;
85+
}
86+
.switch {
87+
position: relative;
88+
display: inline-block;
89+
width: 60px;
90+
height: 34px;
91+
}
92+
93+
/* Hide default HTML checkbox */
94+
.switch input {display:none;}
95+
96+
/* The slider */
97+
.slider {
98+
position: absolute;
99+
cursor: pointer;
100+
top: 0;
101+
left: 0;
102+
right: 0;
103+
bottom: 0;
104+
background-color: #ccc;
105+
-webkit-transition: .4s;
106+
transition: .4s;
107+
}
108+
109+
.slider:before {
110+
position: absolute;
111+
content: "";
112+
height: 26px;
113+
width: 26px;
114+
left: 4px;
115+
bottom: 4px;
116+
background-color: white;
117+
-webkit-transition: .4s;
118+
transition: .4s;
119+
}
120+
121+
input:checked + .slider {
122+
background-color: #2196F3;
123+
}
124+
125+
input:focus + .slider {
126+
box-shadow: 0 0 1px #2196F3;
127+
}
128+
129+
input:checked + .slider:before {
130+
-webkit-transform: translateX(26px);
131+
-ms-transform: translateX(26px);
132+
transform: translateX(26px);
133+
}
134+
135+
/* Rounded sliders */
136+
.slider.round {
137+
border-radius: 34px;
138+
}
139+
140+
.slider.round:before {
141+
border-radius: 50%;
142+
}
143+
144+
.switch-container {
145+
font-family: arial;
146+
background-color: black;
147+
color: white;
148+
padding: 20px;
149+
width: 100%;
150+
}
151+
</style>
152+
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)