CODEWITHSUNDEEP
javascripthtml5-canvasredraw
heltonbiker
heltonbiker

Reputation: 27575

Redrawing canvas keeps overwriting its content - clearRect() not working?

I'm using sliders to tinker some numeric parameters and redraw the graph of a function. Currently, only the topmost slider works.

The problem is: instead of replacing the previous plot, each redraw writes over, quickly cluttering everything and definitely not being what I want.

Worst yet, I can't figure out why this is happening, since I seem to be clearing things properly.

The behaviour is the same either on last-version Firefox and Chrome.

What might I be doing wrong?

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">

    <title>Gerador Envelope</title>

</head>

<body onload="redraw();">

    <canvas id="Canvas" width="1000" height="200"></canvas><br/>

    <label>subida</label><input type="range" min="0" max="255" value="0" oninput="baseFreq = this.value; redraw();"/><br/>
    <label>platô</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>descida</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>repouso</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>mod. amp.</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>freq. mod.</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>


    <script type="text/javascript">

        var baseFreq = 1;

        var canvas = document.getElementById('Canvas');
        var cx = canvas.getContext('2d');

        function redraw () {

            var w = canvas.width;
            var h = canvas.height;

            cx.save();

            cx.clearRect(0, 0, w, h);

            cx.fillStyle = '#ddd';
            cx.fillRect(0, 0, w, h);


            cx.translate(0, h/2);

            cx.moveTo(0,0.5);
            cx.lineTo(w,0.5);
            cx.stroke();  

            var array = [];
            var b = w;
            while(b--)
                array[b] = (b+1) / baseFreq; 

            var seno = [];
            seno = array.map(function(x) {
                    return Math.sin(x) * 20;
                });

            cx.moveTo(0, seno[0]);
            for (var x = 1; x < w; x++) {
                cx.lineTo(x, seno[x]);
            }
            cx.stroke();

            array.length = 0;
            seno.length = 0;

            cx.restore();
        }
    </script>


</body>
</html>

Upvotes: 0

Views: 324

Answers (1)

Stephen O&#39;Connor
Stephen O&#39;Connor

Reputation: 1475

You need to start your line drawing with a beginPath call before you do your drawing commands and then end with stroke. Otherwise you are just adding drawing commands to the same path every time you redraw.

cx.translate(0, h/2);
cx.beginPath();
cx.moveTo(0,0.5);

and you should lose the first stroke as well. You don't need to call it twice.

cx.moveTo(0,0.5);
cx.lineTo(w,0.5);
//cx.stroke();

Upvotes: 1

Related Questions