Can you do an isometric perspective with HTML5 <canvas>?
It is possible to do an isometric perspective with HTML5 <canvas>? It is with setTransform? Or does it exist another way?
Example:
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
Something like the perspective of Farmville.
Thanks a lot.
Answer
You can draw whatever you want on the canvas down to the individual pixel, so any question like "is it possible" will have a "yes" answer.
If you mean if a 3d pipeline is already built-in in the canvas the answer is no, canvas context is 2d so commands are 2d. Canvas elements do actually support a full 3d pipeline (webgl) but that is very low level and geared toward giving access to a GPU (more specifically is designed to represent how current hardware works); the "high-level" abstract API is instead 2d. You can set up a 2d matrix that will make your square-drawing commands looking like an isometric view, but you won't be able to draw anything above or below that plane as high-level commands only handle 2d coordinates.
You can of course do 3d rendering (either isometric or perspective) in a canvas 2d context using standard 3d->2d mappings techniques. See for example this 4k demo that is using only canvas 2d context and javascript (here is a youtube video of the same if your browser doesn't support HTML5).
For an isometric view the matrix setting part is simpler... for example
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);
where ctx is a canvas context will set up a matrix that:
- has an XY rotation angle of
angle1 - has a view tilt angle of
angle2 - maps a length of 1 to 100 pixels
- maps (0, 0) to 200, 200
You can see a small example of these formulas in action on this example page.