title: Easeljs: Getimagedata and put it into a bitmap object
body: <p>So I'm using Easel.js and just want a fast way to threshold an image, then read it back into the bitmap, so that I rotate it and size it and so on. But the code below is not working. The thresholding part works, and if I put putimagedata, that works. But how to get the thresholded data back into the bitmap object?</p>
  
  <p>Roger  </p>
  
  <pre><code>var canvas, stage, background, imgData, newBackground
  
  (function initializeCanvas() {
      canvas = document.getElementById("canvas")
      stage = new createjs.Stage("canvas")
  
      background = new createjs.Bitmap("background1.jpg");
      background.image.onload = handleBackgroundImage_Loaded
  })();
  
  function handleBackgroundImage_Loaded(evt) {
      background.x = 0
      background.y = 0
      stage.addChild(background);
      stage.update()
  
      var context = canvas.getContext('2d');
      var imgData = context.getImageData(0, 0, background.image.width, background.image.height);
  
      background.visible = 0
  
      for (i = 0; i &lt; imgData.data.length ; i = i + 4) {
          brightnessValue = 0.299 * imgData.data[i] + 0.587 * imgData.data[i + 1] + 0.114 * imgData.data[i + 2]
          if (brightnessValue &gt; 150) {
  
          } else {
              imgData.data[i + 3] = 0  // if perceptual brightness less than some threshold, then that pixel becomes completely transparent.
          }
      }
  
      background.image.data = imgData.data
      stage.update()
  
      //context.putImageData(imgData,0,0);        
  }
  </code></pre>