sadorowo/draw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ids

Browse Source
This commit is contained in:
sadorowo 2023-10-27 07:30:16 +00:00
parent e0469d7a54
commit f62d04105d
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -11,7 +11,8 @@
<body> <body>
<div id="menu"> <div id="menu">
<select id="colorSelect"> <label for="colorSelector">Wybierz kolor: </label>
<select id="colorSelector">
<option value="green">Zielony</option> <option value="green">Zielony</option>
<option value="red">Czerwony</option> <option value="red">Czerwony</option>
<option value="yellow">Żółty</option> <option value="yellow">Żółty</option>
@ -20,9 +21,8 @@
<option value="black">Czarny</option> <option value="black">Czarny</option>
<option value="lime">Limonkowy</option> <option value="lime">Limonkowy</option>
</select> </select>
<label for="colorSelect">Wybierz kolor: </label>
<input type="range" min="5" max="40" value="5" id="weightSlider"/>
<label for="weightSlider">Wybierz grubość linii: </label> <label for="weightSlider">Wybierz grubość linii: </label>
<input type="range" min="5" max="40" value="5" id="weightSlider"/>
<button id="clearButton">Wyczyść rysunek!</button> <button id="clearButton">Wyczyść rysunek!</button>
</div> </div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>

6
script.js
View File

@ -4,7 +4,12 @@ document.addEventListener('mouseup', stopPainting);
document.addEventListener('mousemove', draw); document.addEventListener('mousemove', draw);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
const colorSelector = document.getElementById('colorSelector');
const weightSlider = document.getElementById('weightSlider');
const clearButton = document.getElementById('clearButton');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
let color = 'green'; let color = 'green';
let weight = 5; let weight = 5;
@ -23,7 +28,6 @@ document.addEventListener('wheel', e => {
clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height)) clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))
weightSlider.addEventListener('change', e => weight = e.target.value) weightSlider.addEventListener('change', e => weight = e.target.value)
colorSelector.addEventListener('change', e => color = e.target.value) colorSelector.addEventListener('change', e => color = e.target.value)
resize(); resize();
function resize() { function resize() {