diff options
| author | vulonkaaz <7442677+vulonkaaz@users.noreply.github.com> | 2025-05-25 23:16:55 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-05-25 23:16:55 +0000 |
| commit | b5dbed4a14e09fb6fdf7204d4240328aca422812 (patch) | |
| tree | 0fddb1aa0a1ccb7ec4c09d2ffc8f878b6e9b3269 | |
| parent | 63ef8b6a6608ad28f6e20d54a8933d15c1ab6604 (diff) | |
| parent | 14dbc7b73bb4144e7d3441ceb11786ac712d176c (diff) | |
Merge pull request #4 from slicin/pen-size-slider
Add pen size slider
| -rw-r--r-- | views/partials/canvas.html | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/views/partials/canvas.html b/views/partials/canvas.html index 9914bda..94ef89b 100644 --- a/views/partials/canvas.html +++ b/views/partials/canvas.html @@ -1,10 +1,11 @@ <div class="editor"> <canvas id="canvas" style="background:#fff; border:1px inset #888" width="400" height="200"></canvas><br> - <button type="button" id="blackbtn" style="background-color: black; width: 4em; height: 2em"></button> <button type="button" id="whitebtn" style="background-color: white; width: 4em; height: 2em"></button> + <button type="button" id="blackbtn" style="background-color: black; width: 4em; height: 2em"></button> <button type="button" id="whitebtn" style="background-color: white; width: 4em; height: 2em"></button> <button type="button" id="redbtn" style="background-color: red; width: 4em; height: 2em"></button> <button type="button" id="bluebtn" style="background-color: blue; width: 4em; height: 2em"></button><br> <button type="button" id="magentabtn" style="background-color: magenta; width: 4em; height: 2em"></button> <button type="button" id="cyanbtn" style="background-color: cyan; width: 4em; height: 2em"></button> <button type="button" id="yellowbtn" style="background-color: yellow; width: 4em; height: 2em"></button> <button type="button" id="greenbtn" style="background-color: lime; width: 4em; height: 2em"></button><br> - pen size : <input type="number" id="pensize" value="1" min="1" max="99"><br> + pen size : <input type="range" id="pensize-slider" value="1" min="1" max="99" style="vertical-align: middle;"> + <input type="number" id="pensize" value="1" min="1" max="99" style="width: 50px;"><br> <button type="button" id="undobtn">Undo</button> <button type="button" id="clearbtn">Clear</button><br> <button type="button" id="sendbtn">Send</button> </div> @@ -153,6 +154,16 @@ ctx.lineWidth=pensize.value; console.log(pensize.value) }); + pensize.addEventListener("input", () => { + pensizeSlider.value = pensize.value; + ctx.lineWidth = pensize.value; + }); + + const pensizeSlider = document.getElementById('pensize-slider'); + pensizeSlider.addEventListener("input", () => { + pensize.value = pensizeSlider.value; + ctx.lineWidth = pensizeSlider.value; + }); // Keyboard shortcut for undo document.addEventListener("keydown", function(event) { |