javascript - interactive clipping does not refresh screen

Question

I need to have a program that allows the user to clip an image with a rectangle:

I expected that when I clicked on different locations on the canvas, the program will clip the background image at that location. However, as you can see from the link, each time the mouse is clicked, the screen does not get refreshed. I expected the background is only clipped by one rectangle at the latest mouse location; instead, it seems like the background is clipped by all the mouse clicks.Thanks

Here is my code:

<html>
  <head>
      <style>
          body {
              margin: 0px;
              padding: 0px;
         }
    </style>
  </head>
  <body>

    <canvas id='myCanvas' width="480" height="320"> </canvas>

    <script >
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
        var rectX = 75;
        var rectY = 60;

        function draw() {
          context.clearRect(0,0, canvas.width, canvas.height);
          context.beginPath();
          context.rect(rectX, rectY, 250, 180);
          context.clip();
            context.drawImage(imageObj, 69, 50);
        };

        imageObj.onload = function() {
            draw();
            canvas.onmouseup = function(e) {
                rectX = e.x;
                rectY = e.y;
                draw();
            };
        };
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';



        </script>

    </body>
</html>

can't see a thing in the fiddle, actually - nevermind, there it is — Jaromanda X, Oct 28 '16 at 05:30

score 0 · Answer 1 · answered Oct 31 '16 at 20:23

I figured out what was wrong. To make the program behaves the way I intended it to behave, I just need to add context.save() before the path and context.restore() after the drawing. So, the new code would look like this:

....
      context.clearRect(0,0, canvas.width, canvas.height);
      context.save();  //new code
      context.beginPath();
      context.rect(rectX, rectY, 250, 180);
      context.clip();
      context.drawImage(imageObj, 69, 50);
      context.restore();//new code

javascript - interactive clipping does not refresh screen

1 Answers1