title: Pixelated resize using canvas with transparent PNG
body: <p>I want to accomplish a pixelated effect using the canvas option imageSmoothingEnabled=false; so the image "unblurs" on scroll.</p>
  
  <p>Everything works fine until using transparent images namely PNGs. The scaled image is projected, which stays in the background.</p>
  
  <p>Also the image does not get loaded until the user has scrolled a few pixels.</p>
  
  <p>I've found out that the <a href="https://www.w3schools.com/tags/canvas_drawimage.asp" rel="nofollow noreferrer">canvas.drawImage()</a> function owns parameters to set the offset. However I haven't found a solution to this.</p>
  
  <p><strong>Demo <a href="https://jsfiddle.net/aLjfemru/" rel="nofollow noreferrer">https://jsfiddle.net/aLjfemru/</a></strong></p>
  
  <pre><code>var ctx = canvas.getContext('2d'),
    img = new Image(),
    play = false;
  
  /// turn off image smoothing - this will give the pixelated effect
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;
  
  
  /// wait until image is actually available
  img.onload = function(){
                  image1.src="nf.png";
  
                  context.drawImage(image1, 50, 50, 10, 10);
                  };
  
  img.src = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Gorgosaurus_BW_transparent.png';
  
  /// MAIN function
  function pixelate(v) {
    document.getElementById("v").innerHTML = "(v): " + v;
  
    /// if in play mode use that value, else use slider value
    var size = v * 0.01;
  
    var w = canvas.width * size;
    var h = canvas.height * size;
  
    /// draw original image to the scaled size
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, w, h);
    ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);
  }
  
  function onScroll() {
    $(window).on('scroll', function() {
      var y = window.pageYOffset;
      if (y &gt; 10) {
        y = Math.pow(y, 0.8);
        if (y &gt;= 60) {
          y = 100;
        }
        pixelate(y);
      }
    });
  }
  onScroll();
  </code></pre>