View Full Version : canvas/js 2d perspective transform

07-13-2011, 12:04 PM
not sure if this is the right place to ask canvas questions, but if it is, i'm trying to program a game like air hockey (with some twists). it works pretty well now but the table is viewed from overhead, and i would prefer to show the game from the player's perspective, as in the pic, without having to rewrite my existing code. anyone know of any js libraries or formulas which can accomplish this?


07-13-2011, 12:09 PM
I never actually tried this, but I can refer you to http://stackoverflow.com/questions/5186013/can-you-do-an-isometric-perspective-with-html5-canvas

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);

07-13-2011, 12:17 PM
not looking for isometric though... way too many resources on that...

rnd me
07-13-2011, 11:12 PM
use css transforms to skew the canvas element...
css3 should work in all the same places as canvas.


07-14-2011, 02:20 AM
awesome! not aware of these, probably cos i'm usually developing for the least common denominator of browsers and css3 is like a faraway dream...