I'm using canvas for a project and I have a number of elements that I'm skewing. I'm only skewing on the y value and just want to know what the new width of the image is after skewing (so I can align it with another canvas element). Check out the code below to see what I mean

ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);

The goal would be to know that the 42 by 60 image was now a X by 60 image so I could do some translating before drawing it at 0,0. It's easy enough to measure each image individually, but I have different skew values and heights/widths throughout the project that need to be align. Currently I use this code (works decently for images between 25 and 42 widths):

var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;

As images get wider though this formula quickly falls apart (I think it's a sloping formula not a straight value like this one). Any ideas on what canvas does for skews?

I'm using canvas for a project and I have a number of elements that I'm skewing. I'm only skewing on the y value and just want to know what the new width of the image is after skewing (so I can align it with another canvas element). Check out the code below to see what I mean

ctx.save();
//skew the context
ctx.transform(1,0,1.3,0,0,0);
//draw two images with different heights/widths
ctx.drawImage(image,0,0,42,60);
ctx.drawImage(image,0,0,32,25);

The goal would be to know that the 42 by 60 image was now a X by 60 image so I could do some translating before drawing it at 0,0. It's easy enough to measure each image individually, but I have different skew values and heights/widths throughout the project that need to be align. Currently I use this code (works decently for images between 25 and 42 widths):

var skewModifier = imageWidth*(8/6)+(19/3);
var skewAmount = 1.3; //this is dynamic in my app
var width = (skewModifier*skewAmount)+imageWidth;

As images get wider though this formula quickly falls apart (I think it's a sloping formula not a straight value like this one). Any ideas on what canvas does for skews?

• javascript
• html
• canvas
• drawimage

• I guess I could clarify it this way. Given a width and height, can you tell the new width of an image when skewed to X. (It seems that the height also has an effect even though it's only a horizontal skew). – Jeremy Commented Feb 14, 2012 at 17:41
• Alright I'm getting closer. I've now figured out that if I get the diagonal length of the image and multiply that by my skew I'm fairly close to the right value. Still not quite there yet. Any ideas? – Jeremy Commented Feb 14, 2012 at 19:09
• Do you really mean ctx.transform(1,0,1.3,0,0,0); and not ctx.transform(1,0,1.3,1,0,0);? – Simon Sarris Commented Feb 14, 2012 at 20:31
• Yeah, I was copying from my code where I actually use a -1 to flip the canvas. Not relevant to this question so I was removing all the extra bits. – Jeremy Commented Feb 14, 2012 at 20:45

2 Answers 2

You should be able to derive it mathematically. I believe:

Math.atan(skewAmount) is the angle, in radians, that something is skewed with respect to the origin.

So 1.3 would skew the object by 0.915 radians or 52 degrees.

So here's a red unskewed object next to the same object skewed (painted green). So you have a right triangle:

We know the origin angle (0.915 rads) and we know the adjacent side length, which is 60 and 25 for your two images. (red's height).

The hypotenuse is the long side thats being skewed.

And the opposite side is the triangle bottom - how much its been skewed!

Tangent gets us opposite / adjacent if I recall, so for the first one:

tan(0.915) = opposite / 60, solving for the opposite in JavaScript code we have:

opposite = Math.tan(0.915)*60

So the bottom side of the skewed object starts about 77 pixels away from the origin. Lets check our work in the canvas:

http://jsfiddle/LBzUt/

Looks good to me!

The triangle in question of course is the canvas origin, that black dot I painted, and the bottom-left of the red rectangle, which is the original position that we're searching for before skewing.

That was a bit of a haphazard explanation. Any questions?

Taking Simon's fiddle example one step further, so you can simply enter the degrees:

Here's the fiddle http://jsfiddle/LBzUt/33/