title: HTML5 canvas zoom draw again
body: <p>Currently im trying to make a canvas zoom and also draw again the whole canvas</p>
  
  <pre><code>var painter = document.getElementById('painter');
  
  var cp = painter.getContext('2d');
  
  var scale = 1;
  var originx = 0;
  var savedData = [];
  var originy = 0;
  var zoom = 0;
  
  $('#painter').on('mousewheel', function(event) {
  
          var imgData = cp.getImageData(0, 0, painter.width, painter.height);
          savedData.push(imgData);
          var mousex = event.clientX - painter.offsetLeft;
          var mousey = event.clientY - painter.offsetTop;
          var wheel = event.deltaY;//n or -n
  
          var zoom = 1 + wheel/2;
  
          cp.translate(
              originx,
              originy
          );
          cp.scale(zoom,zoom);
          cp.translate(
              -( mousex / scale + originx - mousex / ( scale * zoom ) ),
              -( mousey / scale + originy - mousey / ( scale * zoom ) )
          );
  
           if (savedData.length &gt; 0) {
                  var imgData = savedData.pop();
                  cp.putImageData(imgData, 0, 0);
              }
  
          originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
          originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
          scale *= zoom;
  
      });
  </code></pre>
  
  <p>Thing is it does not work. Canvas is never updated... the variables seems to be fine and since I need to draw again the whole canvas Im saving all the data into an array</p>