CODEWITHSUNDEEP
javascripthtmlcanvasweb
yesfabime
yesfabime

Reputation: 814

Clear Canvas doesn't work

I have a canvas that is the container for some stuff. Now I want to completly clear the whole content.

Here my HTML:

    <body>  
        <canvas id="my" width="1800" height="1000" style="border:3px solid"></canvas>     
        <br>
        <input type="button" value="line" onclick="drawline()"/>
        <input type="button" value="circle" onclick="drawcircle()"/>
        <input type="button" value="reset" onclick="reset()"/>
    </body>

Here my Javascript:

    var canvas;
    var context;
    function drawline()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(70, 140);
        context.lineTo(140, 70);
        context.stroke();
    }

    function drawcircle()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.beginPath();
        context.arc(95,50,40,0,2*Math.PI);
        context.stroke();
        context.closePath();
    }

    function reset()
    {
        canvas = document.getElementById("my");
        canvas.clearRect(0,0, canvas.width, canvas.height);
    }

But the reset button don't work. I'm a beginner and already tried some debugging: He goes into the reset function but crashed at the second line. canvas.width and canvas.height also got the right values - I printed them out to see what's in.

EDIT: Thanks to "Yeldar Kurmangaliyev" - to get the 2d context of the canvas solved a part of the problem. But this kind of drawing in my js file still won't disappear:

    function tree()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        for (var i = 0; i <= 1; i++)
        {
            if (i === 0)
            {
            context.translate(350, 200);
            }
            else
            {
            context.translate(0, 100);
            }

            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
            context.lineTo(0, -140);
            context.lineTo(15, -110);
            context.lineTo(5, -110);        
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
            context.stroke(); 
        }
    }

EDIT2: I found the solution for the second problem. It is the context.translate. I assume, the clear.Rect clears the wrong area in the canvas because the "zero coordinates" were moved to the coordinates that are defined in the translate. Means 0.0 is after the translate 350.200 and then 350.300, 350.400, ...

This is now my working reset function. Thanks to this post:

    function reset()
    {
        canvas = document.getElementById("my");
        context = canvas.getContext("2d");
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0,0, canvas.width, canvas.height);
    }

Upvotes: 3

Views: 4912

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

You are trying to call clearRect on the result of document.getElementById (DOM element). clearRect is a member of canvas context.

It should be:

function reset()
{
    canvas = document.getElementById("my");
    context = canvas.getContext("2d");
    context.clearRect(0,0, canvas.width, canvas.height);
}

Upvotes: 6

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

Because clearRect takes the context of the canvas and not the canvas itself:

function reset()
{
    canvas = document.getElementById("my");
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0,0, canvas.width, canvas.height);
}

Upvotes: 0

Related Questions