jCanvas - Stretching image to fit height, and letting it flow over in width

Question

I've been trying to figure out how to scale an image/pattern to fill the canvas in height, but go clip in width using jCanvas.

I've been trying to calculate it myself, but my poor skills in math have not been useful. I've also tried to google my way thru, but that has also been unsuccessful.

I would like to emulate "background-size: auto 100%;"

Code:

// this is the path
  function draw(patt) {
    that.$canvas.drawLine({
      layer: true,
      fillStyle: patt,
      name: 'myPath',
      x1: 0, y1: 0,
      x2: that.topPoint, y2: 0,
      x3: that.bottomPoint, y3: that.height,
      x4: 0, y4: that.height,
      closed: true
    });
  }


  // this is the image itself
  var patt = that.$canvas.createPattern({
    width: that.width,
    height: that.height,
    source: function(context) {
      $(this).drawImage({
        source: that.$laImg.attr('src'),
        x: 0, y: 0,
        fromCenter: false,
        width: that.width,
        height: that.height
      });
    },

    repeat: "repeat",
    load: draw
  });

Answer 1

I solved my problem by having this:

<img src="image.jpg" style="width: auto; height: 100%;" alt="" />

And use that to get the proper dimensions.