Faire de la 3D avec canvas 2D

[sclabet]

en fait Xenos tu as raison, il faut bien utiliser les matrices, par contre le dessin que tu proposes est un dessin en perspective vraie grandeur (celle que perçois notre œil et qui noues est donc beaucoup plus agréable(géométrie projective)) ce que je vais proposer est une perspective cavalière (géométrie euclidienne).

la fonction setTransform fait la projection sur l'écran de la transformation euclidienne (matrice 3x3) suivant un axe perpendiculaire à celui-ci :

setTransform(a, b, c, d, e, f)
a c e
b d f
0 0 1

or la composée de trois rotations autour des axes X, Y et Z donne la matrice :

cosy*cosz //// sinx*siny*cosz-cosx*sinz //// cosx*siny*cosz+sinx*sinz
cosy*sinz //// sinx*siny*sinz+cosx*cosz //// cosx*siny*sinz-sinx*cosz
-siny ////////////// sinx*cosy /////////////// cosx*cosy


finalement en ne retenant que ce qui m'intéresse :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

const X = 45;
const Y = 60;
const Z = 30;

var cosx = Math.cos(X*Math.PI/180);
var sinx = Math.sin(X*Math.PI/180);
var cosy = Math.cos(Y*Math.PI/180);
var siny = Math.sin(Y*Math.PI/180);
var cosz = Math.cos(Z*Math.PI/180);
var sinz = Math.sin(Z*Math.PI/180);

ctx.setTransform(cosy*cosz,cosy*sinz,sinx*siny*cosz-cosx*sinz,sinx*siny*sinz+cosx*cosz,cosx*siny*cosz+sinx*sinz,cosx*siny*sinz-sinx*cosz);
ctx.fillStyle='lightblue';
ctx.fillRect(50,50,250,100);
ctx.fillStyle='red';
ctx.font='30px Arial';
ctx.fillText('JeuWeb.org', 100,100);

voilà, j'espère que ça sera utile