Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated!
<canvas id="myCanvas" width="800px" height="500px" style="border: 3px solid black"></canvas><br>
<input type="range" id="vol" name="vol" min="0" max="100">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var xPos = 0;
var yPos = 0;
c.addEventListener("mousedown", setPosition);
c.addEventListener("mousemove", draw);
function setPosition(e) {
xPos = e.clientX;
yPos = e.clientY;
}
function draw(e) {
if (e.buttons == 1) {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#ff0000";
ctx.moveTo(xPos, yPos);
setPosition(e);
ctx.lineTo(xPos, yPos);
ctx.stroke();
}
}
function clearScreen ()
{
var m = confirm("Do you want to clear your drawing?");
}
</script>