Convert skew to HTML5 canvas

I'm trying to implement a skew transformation using the "x" axis with an HTML5 canvas, but my code doesn't work ... Here is my JavaScript:

function init() {
    var canvas = document.getElementById('skewTest'),
        context = canvas.getContext('2d'),
        angle = Math.PI / 4;
    img = document.createElement('img');
    img.src = 'img.gif';
    img.onload = function () {
        context.setTransform(1, Math.tan(angle), 1, 1, 0, 0);
        context.clearRect(0, 0, 200, 200);
        context.drawImage(img, 0, 0, 100, 100);
    }
}

      

I will be very happy to see a working example in the JsFiddle.

Thank you in advance!

+3


source to share


1 answer


Correct skew matrix in only one direction

    context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
    //                                       ^

      



When the number ^

is 1, you also distort the image in the y direction by 45 °.

Example: http://jsbin.com/etecay/edit#html,live

+6


source







All Articles