Home/ Questions/Q 9311053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T01:16:05+00:00

I have a function that draw something on a canvas after triggering the if

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0