how do i clear canvas?

Question

I have a function that draw something on a canvas after triggering the if statement. I would like to know how to clear the canvas after it has been remove from the the coordinate(outside the if statement), I'm not sure how to go about this.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function startCanvas() {
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");

                var one = c.getContext("2d");
                var two = c.getContext("2d");
                var three = c.getContext("2d");
                var four = c.getContext("2d");
                var five = c.getContext("2d");
                var clearCanvas = false;

                var image = new Image();
                var imageone = new Image();

                image.onload = function () {
                    ctx.drawImage(image, 69, 50);

                    //draw a circle
                    one.beginPath();
                    one.arc(180, 90, 10, 0, Math.PI * 2, true);
                    one.closePath();
                    one.fill();

                    two.beginPath();
                    two.arc(155, 138, 10, 0, Math.PI * 2, true);
                    two.closePath();
                    two.fill();

                    three.beginPath();
                    three.arc(160, 180, 10, 0, Math.PI * 2, true);
                    three.closePath();
                    three.fill();

                    four.beginPath();
                    four.arc(257, 210, 10, 0, Math.PI * 2, true);
                    four.closePath();
                    four.fill();

                    five.beginPath();
                    five.arc(238, 235, 10, 0, Math.PI * 2, true);
                    five.closePath();
                    five.fill();
                };

                image.src = 'denmark.jpg';

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100)) {
                            alert('this is a test');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
                            ctx.font = "30px Arial";
                            ctx.fillText("Hello World", 400, 20);
                            ctx.drawImage(imageone, 400, 60);
                            imageone.src = 'alborg.jpg';
                        } else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {
                            ctx.clearRect(0, 0, 400, 60);
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190)) {
                            alert('also work');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220)) {
                            alert('ok');
                        }
                    },
                    false);

                c.addEventListener(
                    'mousemove',
                    function (e) {
                        if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245)) {
                            alert('yes');
                        }
                    },
                    false);
            }
        </script>
    </head>
    <body onload="startCanvas()">
        <canvas id="myCanvas" width="600" height="600">Your browser does not support the HTML5 canvas tag.</canvas>
    </body>
</html>

Scarecrow · Answer 1 · 2013-02-15T05:48:50.353

3

use

ctx.clearRect(x, y, canvas_width, canvas_height);
//In your code x=0,y=0, canvas_width=400 and canvas_height=60

instead of

ctx.clearRect(400,60,0,0);

Update:-

Try This Update...

 else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) { 
 ctx.clearRect(0,0,400,60);
 one.clearRect(0,0,400,60);
 two.clearRect(0,0,400,60);
 three.clearRect(0,0,400,60);
 four.clearRect(0,0,400,60);
 five.clearRect(0,0,400,60);
}

Update

        c.addEventListener('mousemove',function (e) {
  if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
   console.log("Hello"); 
      ctx.clearRect(0, 0, 400, 60);
      one.clearRect(0, 0, 400, 60);
      two.clearRect(0, 0, 400, 400);
      three.clearRect(0, 0, 400, 60);
      four.clearRect(0, 0, 400, 60);
  five.clearRect(0, 0, 400, 60);

  }  else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {         
  console.log("hi");      
  }
  }, false);

edited Feb 15 '13 at 05:48

answered Feb 15 '13 at 04:14

Scarecrow

4,057
3
30
56

i've updated my code, added four argument and still it not removing my the imageone i set – Devendra Danny Ramdayal Feb 15 '13 at 04:32
use ctx.clearRect(00,0,400,60); not ctx.clearRect(400,60,0,0); – Scarecrow Feb 15 '13 at 04:35
updated code. i try that it still not working. it remove the strip of the top of my map but it didn't remove the `code`ctx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';`code` – Devendra Danny Ramdayal Feb 15 '13 at 04:41
just try it didn't work – Devendra Danny Ramdayal Feb 15 '13 at 04:52
can you provide any jsfiddle link so that I can debug it? – Scarecrow Feb 15 '13 at 04:55
http://jsfiddle.net/dJqzy/ – Devendra Danny Ramdayal Feb 15 '13 at 05:00
your jsfiddle not working, not even drawing anything, first try to upload a working code that will draw your canvas, then try to clear drawing – Scarecrow Feb 15 '13 at 05:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24546/discussion-between-devendra-danny-ramdayal-and-swarnendu) – Devendra Danny Ramdayal Feb 15 '13 at 05:27
the execution is not reaching to the else part where you written the clearing code, I have written the clearing code in the if part, this time it works fine. – Scarecrow Feb 15 '13 at 05:42
you made the map clear , not the picture – Devendra Danny Ramdayal Feb 15 '13 at 05:55
you made the map clear , not the picture. that map is suppose to stay. this is what i trying to do"if i hover over a certain coordinate my picture pop up to the right, once i stop hovering over it it clear". – Devendra Danny Ramdayal Feb 15 '13 at 06:01
I guess you have to use different canvas to do so, Check this http://stackoverflow.com/questions/14565209/is-it-possible-to-add-an-array-of-images-to-canvas-and-then-delete-them/14590248#14590248 – Scarecrow Feb 15 '13 at 06:05

score 1 · Answer 2 · answered Feb 15 '13 at 03:28

1

clearRect takes four arguments: x, y, width and height. Also, is it ctx or context? Use the right variable.

answered Feb 15 '13 at 03:28

Niet the Dark Absol

320,036
81
464
592

it not working still i editied my code, i try to remove my dessert pic. but it still there – Devendra Danny Ramdayal Feb 15 '13 at 03:44
What part of "four arguments" is unclear? Four. *Four*. Not two, ***FOUR***!!! – Niet the Dark Absol Feb 15 '13 at 03:57
i've updated my code, added four agurument nothing is happening. – Devendra Danny Ramdayal Feb 15 '13 at 04:31
I also gave you the ORDER of arguments... – Niet the Dark Absol Feb 15 '13 at 04:34
updated code. i try that it still not working. it remove the strip of the top of my map but it didn't remove the ctx.drawImage(imageone, 400, 60); imageone.src = 'alborg.jpg';code added entire code – Devendra Danny Ramdayal Feb 15 '13 at 04:49
Have you looked at a [tutorial](http://google.com/search?q=canvas+tutorial+javascript)? – Niet the Dark Absol Feb 15 '13 at 04:59

markE · Accepted Answer · 2014-03-07T19:01:20.207

To clear the canvas of your "Hello World" and "alborg.jpg", use this: ctx.clearRect(400,0,200,600)

Example code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
    function startCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var one = c.getContext("2d");
        var two = c.getContext("2d");
        var three = c.getContext("2d");
        var four = c.getContext("2d");
        var five = c.getContext("2d");
        var clearCanvas = false;

        var image = new Image();
        var imageone = new Image();

        image.onload = function () {
            ctx.drawImage(image, 69, 50);

            //draw a circle
            one.beginPath();
            one.arc(180, 90, 10, 0, Math.PI * 2, true);
            one.closePath();
            one.fill();

            two.beginPath();
            two.arc(155, 138, 10, 0, Math.PI * 2, true);
            two.closePath();
            two.fill();

            three.beginPath();
            three.arc(160, 180, 10, 0, Math.PI * 2, true);
            three.closePath();
            three.fill();

            four.beginPath();
            four.arc(257, 210, 10, 0, Math.PI * 2, true);
            four.closePath();
            four.fill();

            five.beginPath();
            five.arc(238, 235, 10, 0, Math.PI * 2, true);
            five.closePath();
            five.fill();
        };

        image.src = 'coffee.png';


     c.addEventListener('mousemove',
     function (e) {
         if ((e.x >= 170 && e.x <= 190) && (e.y >= 80 && e.y <= 100)) {
             alert('this is a test');
         }
     }
     , false);


     c.addEventListener('mousemove',
     function (e) {
      if ((e.x >= 145 && e.x <= 190) && (e.y >= 128 && e.y <= 148)) {
          ctx.font = "30px Arial";
          ctx.fillText("Hello World", 400, 20);
          ctx.drawImage(imageone, 400, 60);
          imageone.src = 'house-icon.png';
      } else if ((e.x < 145 && e.x < 190) && (e.y > 128 && e.y < 148)) {
      //
      //
      // HERE IS THE CHANGE TO MAKE YOUR CODE WORK !!!
      //
      // Use this to clear only the "Hello World" and "alborg.jpg"
      //
      //
                ctx.clearRect(400,0,200,600);
      //
      //
      //
            }
        }
        , false);


      c.addEventListener('mousemove',
      function (e) {
           if ((e.x >= 150 && e.x <= 190) && (e.y >= 170 && e.y <= 190)) {
               alert('also work');
           }
       }
       , false);

       c.addEventListener('mousemove',
          function (e) {
              if ((e.x >= 247 && e.x <= 290) && (e.y >= 200 && e.y <= 220)) {
                  alert('ok');
              }
          }
          , false);

        c.addEventListener('mousemove',
        function (e) {
            if ((e.x >= 228 && e.x <= 290) && (e.y >= 225 && e.y <= 245)) {
                alert('yes');
            }
        }
        , false);

    }
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" width="600" height="600";">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

I had to do ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); — elrobis, Mar 07 '14 at 16:35
@elrobis Did you really downvote my answer because it didn't fit your different situation...how rude! — markE, Mar 07 '14 at 17:01
Actually I just removed my initial up-vote because I thought the answer below was more project agnostic. — elrobis, Mar 07 '14 at 18:38
...now that I think about it, my desktop mouse is horrible and sometimes the left button sticks. It's possible that I unintentionally double-clicked the down vote---at the time it seemed that something screwy happened. I didn't mean to criticize your answer as much as promote the one below it. Anyway to offset the unintended results? — elrobis, Mar 07 '14 at 18:40
Yeah you're right---it's showing as a down-vote. When I try to undo it, SO says my answer is locked until you edit your post. If you make some change I'll undo the down-vote. :/ — elrobis, Mar 07 '14 at 18:45

how do i clear canvas?

3 Answers3

Update:-

Update