Html5 canvas with jquery ui slider

Question

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: http://jsfiddle.net/y54Es/25/ 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:

    $("#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;
    }
  }

});

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.

Answer 1

The slide method you are using is only called when the slider is actually being adjusted. jQueryUI Slider object also provides a create method which is called once when the slider is created on page load.

I'd suggest using this to perform the initial setup of the canvas. e.g. loading canvas images etc.