Move circle in canvas based on range slider value in javascript

Question

I'm trying to move a circle in a canvas when range slider is dragged. I can't get the circle to move when I drag.

I can get it to move but the old circle is not deleted so I can many circles. I know I can use clearRect but can't understand where to use it...

Code is below:

<!doctype html> 

<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <meta name="description" content="Hello World!"> 
 <meta name="author" content="Me"> 
 <title>Hello World!</title> 
</head> 
<body> 

 <canvas id="myCanvas" width="500" height="400">Not supported content</canvas> 
    <input type="range" id="length" name="length" min="-100" max="100" oninput="updateTextInput(this.value);">
    <input type="text" id="textInput" value="">

 <script>     
     var cnv = document.getElementById("myCanvas"); 
     var g = cnv.getContext("2d"); 

 g.lineWidth = 3; 
 g.strokeStyle = "#000000"; //black 
 g.fillStyle = "#FF5500"; //red 

 g.beginPath(); 
 g.arc(100, 100, 50, 0, 2*Math.PI); 
 g.fill(); 
 g.stroke(); 

     function updateTextInput(val) {
          document.getElementById('textInput').value=val;

        g.beginPath();
        var placement = val;
        g.arc(placement, 100, 50, 0, 2*Math.PI); 
        g.fill(); 
        g.stroke(); 


     }

 g.beginPath(); 
 g.moveTo(100, 50); 
 g.lineTo(300, 50); 
 g.stroke(); 

 g.beginPath(); 
 g.moveTo(100, 150); 
 g.lineTo(300, 150); 
 g.stroke(); 

 </script> 

</body>

i dont understand ... you dont seem to have bound any events to ever update the circle size. — PlantTheIdea, Sep 08 '14 at 21:16
I create the circle and add the value of the slider inside the function here: g.beginPath(); var placement = val; g.arc(placement, 100, 50, 0, 2*Math.PI); g.fill(); g.stroke(); — Alexander Ahlsen, Sep 08 '14 at 21:17
oh i see, you've set it using HTML attribute onInput. second question ... your statements of *i can't get it to move when i drag* and *i can get it to move* seem to contradict one another. what is the actual problem you have? — PlantTheIdea, Sep 08 '14 at 21:22
I'm sorry, I'm just really frustrated. The problem is that the old generated circle won't delete when I drag the slider over again... — Alexander Ahlsen, Sep 08 '14 at 21:23
no problem, but i mean clarity in your problem question allows for us to answer and solve the problem much easier. — PlantTheIdea, Sep 08 '14 at 21:24
possible duplicate of [How to clear the canvas for redrawing](http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) — user2226755, Sep 08 '14 at 21:30

score 0 · Accepted Answer · answered Sep 08 '14 at 21:27

Your context.clearRect goes just before you do you new drawings....

Here's one way: http://jsfiddle.net/m1erickson/c2g52w9q/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=8;
    ctx.strokeStyle='blue';

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var radius=50;
    draw(0);

    var $percent=$('#percent');
    $percent.on('change',function(){
        draw(parseInt($percent.val()));
    });

    function draw(x){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx+x,cy,radius,0,PI2);
        ctx.closePath();
        ctx.stroke();
        console.log(cx+x);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <input type=range id=percent min=-50 value=0 max=50 step=1><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Move circle in canvas based on range slider value in javascript

1 Answers1