title: Html5 canvas with jquery ui slider
body: <p>My first time with html5, trying to get this jquery ui slider to send the correct value to this html5 canvas opacity. After some googling and messing around, I have it kind of working here: <a href="http://jsfiddle.net/y54Es/25/" rel="nofollow">http://jsfiddle.net/y54Es/25/</a> when you use it, you'll see what I mean, no image appears until the slider has moved, I know that has to do with the order I have the functions in, I just cant get it to work anyway else, here is my code below:
  JS:</p>
  
  <pre><code>    $("#slider").slider({
    animate: true,
    range: "min",
    value: 0.5,
    min: 0,
    max: 0.9,
    step: .01,
  
    slide: function (event, ui) {
      $('#hiddenField').attr('value', ui.value);
      $("#slider-result").html(ui.value);
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var valueVar = $('#hiddenField').val();
      var img1 = loadImage('http://moosepic.com/test2.png', main);
      var img2 = loadImage('http://moosepic.com/test.png', main);
  
      var imagesLoaded = 0;
  
      function main() {
        imagesLoaded += 1;
  
        if (imagesLoaded == 2) {
          // composite now
          ctx.drawImage(img1, 0, 0, 300, 300);
          if (valueVar == 0) {
  
          } else {
            ctx.globalAlpha = valueVar;
            ctx.drawImage(img2, 0, 0, 300, 300);
          }
        }
      }
  
      function loadImage(src, onload) {
        var img = new Image();
  
        img.onload = onload;
        img.src = src;
  
        return img;
      }
    }
  
  });
  </code></pre>
  
  <p>Any help on how to make the second image completely cancel out when the slider is all the way to the left would be awesome... and if anyone could help me load the initial image onto the canvas onload, that would be awesome too.</p>