title: Updating image data using putImageData on a resized canvas element
body: <p>I have a static image (a png) that I'm drawing on a canvas element using <code>drawImage</code>.</p>
  
  <pre><code>var _canvas = null;
  var _context = null;
  var _curImageData;
  
  function copyImageToCanvas(aImg)
  {
    _canvas = document.getElementById("canvas");
    var w = aImg.naturalWidth;
    var h = aImg.naturalHeight;
    _canvas.width = w;
    _canvas.height = h;
  
    _context = _canvas.getContext("2d");
    _context.clearRect(0, 0, w, h);
    _context.drawImage(aImg, 0, 0);
  
    _curImageData = _context.getImageData(0, 0, w, h);
  }
  </code></pre>
  
  <p>I then manipulate the image data pixel by pixel (setting the opacity to 255 or 0 depending on the pixel value) and then update the canvas using <code>putImageData</code>.</p>
  
  <pre><code>function updateImage(maxPixelValToShow)
  {
    for (var x = 0; x &lt; _curImageData.width; x++)
      for (var y = 0; y &lt; _curImageData.height; y++)
      {
          var offset = (y * _curImageData.width + x) * 4;
          var r = _curImageData.data[offset];
          var g = _curImageData.data[offset + 1];
          var b = _curImageData.data[offset + 2];
          var a = _curImageData.data[offset + 3];
          var pixelNum = ((g * 255) + b);
  
          //if greater than max or black/no data
          if (pixelNum &gt; maxPixelValToShow || (!r &amp;&amp; !g &amp;&amp; !b)) {
              _curImageData.data[offset + 3] = 0;
          } else {
              _curImageData.data[offset + 3] = 255;
          }
  
      }
    _context.putImageData(_curImageData, 0, 0);
  }
  </code></pre>
  
  <p>And this all works perfectly.  The issue I'm having is when I create a canvas twice the size of my image (or half the size, for that matter) and draw the image to fit the canvas size.</p>
  
  <pre><code>function copyImageToCanvas(aImg)
  {
    _canvas = document.getElementById("canvas");
    var w = aImg.naturalWidth * 2;  //double the size!
    var h = aImg.naturalHeight * 2; //double the size!
  
    _canvas.width = w;
    _canvas.height = h;
  
    _context = _canvas.getContext("2d");
    _context.clearRect(0, 0, w, h);
    _context.drawImage(aImg, 0, 0, w, h);
  
    _curImageData = _context.getImageData(0, 0, w, h);
  }
  </code></pre>
  
  <p>I'm getting lots of strange artifacts around the edges of my image when I call my <code>updateImage</code> function.  Does anyone know a) why this is happening and b) what can I do about it?</p>
  
  <p>Here are some images to show what is being generated:</p>
  
  <p><a href="http://img204.imageshack.us/i/image1c.png/" rel="nofollow noreferrer">The original image</a></p>
  
  <p><a href="http://img52.imageshack.us/i/image2kc.png/" rel="nofollow noreferrer">The original image after my <code>updateImage</code> function call</a></p>
  
  <p><a href="http://img84.imageshack.us/i/image3rw.png/" rel="nofollow noreferrer">The resized image</a></p>
  
  <p><a href="http://img685.imageshack.us/i/image4jb.png/" rel="nofollow noreferrer">The resized image after my <code>updateImage</code> function call</a></p>
  
  <p><strong>[Solution]</strong>
  Thanks Adam and sunetos, that was the problem. It worked fine once I setup one canvas to store the original file data and do the pixel manipulation and another only for display. Code snippet below:</p>
  
  <pre><code>function updateImage(maxPixelValToShow) {
    //manipulate the _workingContext data
  
    _workingContext.putImageData(_curImageData, 0, 0);
    _displayContext.clearRect(0, 0, _workingCanvas.width*_scale, _workingCanvas.height*_scale);
    _displayContext.drawImage(_workingCanvas, 0, 0, _workingCanvas.width*_scale, _workingCanvas.height*_scale);
  }
  </code></pre>