add: labels

This commit is contained in:
sadorowo 2023-10-27 07:28:15 +00:00
parent ad4682fada
commit e0469d7a54
2 changed files with 6 additions and 8 deletions

View File

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

View File

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