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.