javascript - jCanvas - Stretching image to fit height, and letting it flow over in width -
i've been trying figure out how scale image/pattern fill canvas in height, go clip in width using jcanvas.
i've been trying calculate myself, poor skills in math have not been useful. i've tried google way thru, has been unsuccessful.
i emulate "background-size: auto 100%;"
code:
// 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 }); } // image 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 });
i solved problem having this:
<img src="image.jpg" style="width: auto; height: 100%;" alt="" />
and use proper dimensions.
Comments
Post a Comment