javascript - Can you do an isometric perspective with HTML5 <canvas>?

Question

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 1

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.