How to make my canvas brush in HTML change size using a slider

Question

So basically I want to make it so you can use the slider under the canvas to change the size of the brush, but everything I've tried isn't working. Can anyone help pls? Thanks

        <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>

Does this answer your question? [Jquery Brush Size Slider for Canvas HTML5](https://stackoverflow.com/questions/36944583/jquery-brush-size-slider-for-canvas-html5) — Alex Pappas, Jan 19 '21 at 02:02

score 0 · Accepted Answer · answered Jan 19 '21 at 02:07

0

Simply add an event listener to the change event of the slider like so

<input id="slider" type="range" id="vol" name="vol" min="0" max="100"> // add an id

// code up to c.addEventListener, then add the following

var slider = document.querySelector("#slider");
var brushThickness = slider.value;
slider.addEventListener("change", (e) => brushThickness = e.target.value);

//rest of code

And then make ctx.lineWidth in the draw function equal to brushThickness like so

ctx.lineWidth = brushThickness;

A demo is here

answered Jan 19 '21 at 02:07

Cirrus86

336
4
13

Hi, I forgot to ask, do you also know how to make it so the user can change colour and then the function at the end to clear it? <3 sorry im new to HTML im learning @Cirrus86 – Joe Jan 19 '21 at 05:53
Usually the best way to learn is to try doing it yourself :). If you want some pointers, do something similar to the code to change brush thickness (by declaring a variable) and declare a second input using type 'color'. As for how to clear the canvas, check out https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Cirrus86 Jan 19 '21 at 08:27
i dont get how i'd do it for the change colour part sorry – Joe Jan 19 '21 at 09:15
Add a second input of type color `` next to the slider, and then try taking a similar approach to what is posted in the answer - select the input by id, make a variable `brushColor` and set it to the value, add an event listener to change `brushColor`, and then change `ctx.strokeStyle` to equal `brushColor`. I don't want to just post the code because you learn by googling and finding things out yourself, not just copy pasting someone else's code :) – Cirrus86 Jan 19 '21 at 23:33
https://pastebin.com/0XQQxWf3 How close am i..? – Joe Jan 20 '21 at 00:42
You need to: make a new variable which refers to input with id `brushcolor`; change brush color variable to be dependent on the value of that input, not on the slider; remove quotation marks around `ctx.strokeStyle = "brushColor"`; and add an event listener for the color input to change the brushColor variable – Cirrus86 Jan 20 '21 at 01:15

How to make my canvas brush in HTML change size using a slider

1 Answers1