I need to simulate the effect of skewing an image, like Photoshop, using Javascript. Do you guys know how to do that in Javascript?

What kind of geometry calculation is applied to the <canvas> context? I can't use CSS for this, because it has to be modified dynamically.

I need to simulate the effect of skewing an image, like Photoshop, using Javascript. Do you guys know how to do that in Javascript?

What kind of geometry calculation is applied to the <canvas> context? I can't use CSS for this, because it has to be modified dynamically.

• javascript
• html

Share Improve this question Follow edited Jul 16, 2012 at 20:53 ThinkingStiff 65.4k3030 gold badges147147 silver badges241241 bronze badges asked Jul 16, 2012 at 19:17 DuckDuck 36.1k4848 gold badges268268 silver badges490490 bronze badges 2

• This can be done with CSS3 alone. – Madara's Ghost Commented Jul 16, 2012 at 19:24
• this cannot be done with CSS because it has to be modified on the fly by javascript. I said that on the question. Thanks anyway. – Duck Commented Jul 16, 2012 at 20:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This is possible with CSS3 alone:

img {
  -webkit-transform: skew(45deg);
}

Live Example

Note, I only used webkit, but it's the same for all other modern browsers.

CSS transform: skew(); will do this for you with no Javascript.

Demo: http://jsfiddle/ThinkingStiff/MtWBy/

Output

CSS

#original {
    margin: 55px 10px 0 10px;
}

#vertical {
    margin: 30px 20px 0 0;
    transform:             skew( 0, -30deg );
        -ms-transform:     skew( 0, -30deg );
        -moz-transform:    skew( 0, -30deg );
        -o-transform:      skew( 0, -30deg );
        -webkit-transform: skew( 0, -30deg );
}

#horizontal {
    margin: 55px 0 0 0;
    transform:             skew( -30deg, 0 );
        -ms-transform:     skew( -30deg, 0 );
        -moz-transform:    skew( -30deg, 0 );
        -o-transform:      skew( -30deg, 0 );
        -webkit-transform: skew( -30deg, 0 );
}

.image {
    background-image: url( 'http://placekitten./100' );  
    border: 1px solid black;
    display: inline-block;
    height: 100px;
    margin-right: 20px; 
    vertical-align: top;
    width: 100px;  
}

HTML

<div id="original" class="image"></div>
<div id="vertical" class="image"></div>
<div id="horizontal" class="image"></div>

I found the solution: http://www.w3schools./html5/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0