Unable to implement brush slider for canvas

JavaScript
1

I have a canvas that user can draw but I’m having difficulty to change the size of the brush by using this slider.

<label for="brush">Brush Size:</label><input name="brush" id="brush_size" type="range" value="5"  min="0" max="100" />

function sketchit(e) {
        context.beginPath()
        context.moveTo(mouseX, mouseY);
        context.lineTo(mouseX,mouseY)
        context.lineCap = 'round';
        context.lineWidth = document.getElementById('brush_size').value;
        context.strokeStyle = document.getElementById('color').value;
        context.stroke();
        MouseIsDown = true;
    };

$('#brush_size').change(function(e){
	var slider = document.getElementById('brush_size');
	context.lineWidth = $(this).val() + "px";
	)};

What am I doing wrong? :confused: Thanks in advance.

2

Hi jigalong,

Welcome to the forums :slight_smile:

Your code looks ok at first glance.

Could you post a link to a page where I can see this in action?

3

Thanks Pullo! =)
Guess what? I got them working now. lol. But facing a new problem now. Do you know how to make a photo appear when I hover over an element or certain text? Should I use CSS or Javascript? Can I use bind?
Thanks! =)

4

Hi there,

Sure do!
You can do this with either pure CSS, plain JavaScript or using the jQuery library (for a bit of snazz).

I’ve made you a demo page showing you the three different options.
Notice that when using JavaScript, you can ensure that the photo doesn’t vanish straight away when the user mouses away from whatever element caused the photo to be shown in the first place.
Also, using jQuery, it is a piece of cake to add animation effects.

HTH

<!DOCTYPE HTML>
<html>
  <head>
    <!-- http://www.sitepoint.com/forums/showthread.php?1027026-Unable-to-implement-brush-slider-for-canvas -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demonstrating different ways of fading in an image</title>
    <style>
      #photoContainer{ width:100px; }
      #photoContainer:hover #pic1{ display:block; }
      #pic1, #pic2, #pic3{
        display:none;
        position:absolute;
        top:15px;
        left:150px;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div id="photoContainer">
      <p><a href="#" id="css">The CSS way</a></p>
      <img src="http://ri0lugamer.webs.com/photos/LOLcats/lolcats.jpg" id="pic1">
      <img src="http://www.teamaffinity.org/SRC/C/Lolcats35.jpg" id="pic2">
      <img src="http://nathanmassengill.com/nam2/wp-content/uploads/2011/04/lolcat_moderaterz.jpg" id="pic3">
    </div>
    
    <p><a href="#" id="js">The JavaScript way</a></p>
    <p><a href="#" id="jquery">The jQuery way</a></p>
  
    <script>
      var link1 = document.getElementById("js");
      var pic = document.getElementById("pic2");
      
      link1.onmouseover = function(){
        pic.style.display = "block";
      }
      link1.onmouseout = function(){
        window.setTimeout(function(){pic.style.display = "none";}, 400);
      }
      
      $('#jquery').mouseover(function() {
        $('#pic3').fadeIn("slow");
      });
      
      $('#jquery').mouseleave(function() {
        $('#pic3').fadeOut("slow");
      });
    </script>
  </body>
</html>
5

Pullo, you don’t know how much this has helped! Thank you so much! Also, great job on the kitteh images. Made my afternoon. =)
Just one small part that I don’t really get. Why is the display below is set to block? What happens if it’s not block. I mean, what other choices are there?

#photoContainer:hover #pic1{ display:block; }

Oh yea. Also, I tried removing this part

#photoContainer{ width:100px; }
and I couldn’t see any difference. What’s the reason to use it? Thanks, Pullo. =)

6

Hi,

As the display is originally set to none, you need to give it some other value for it to appear.
You can find a list of the possibilities here: display (CSS property)

Sorry, that was there from a previous iteration (where the picture appeared on the right of the links).
You can remove it.

7

Noted. Thanks, Pullo! Have a great day!