Can you do an isometric perspective with HTML5 ?

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.

Answer 2

Well to make an isometric game its not so much as skewing the whole canvas, its more about the graphics you use. For example the tiles are generally h=w/2. So in a normal game you'd have a tile thats 32x32 in an isometric game you'd make it 32x16. Also the placement of tiles is a bit different to compensate for the angle.

Short answer yes isometric games are fully possible using canvas. Look at Freeciv for an example of one.

Another good place to ask on the specifics of isometric game creation would be https://gamedev.stackexchange.com/