title: 3d drawing in Canvas with HTML+JS
body: <p>Is there any framework/engine that provide ability to draw 3d images on Canvas?</p>
  
  <p>I am planning to draw some primitives (different shapes) located in one plane:</p>
  
  <pre><code>    var dist = 2;
      var hexHalfW = 35;
      var lengthX = 20;
      var hexR = Math.sqrt(lengthX*lengthX+hexHalfW*hexHalfW);//40.31128874
      var hexDiag = 2*hexR;
      var hexHeight = hexDiag;
      var hexWidth = 2*hexHalfW;
  
      function DrawHex(ctx, x, y)
      {               
          var cx = x*(hexWidth + dist) - y*(hexWidth + dist)/2;
          var cy = y*(hexR + lengthX + dist);
          ctx.beginPath();
          ctx.moveTo(cx, cy-hexR);
          ctx.lineTo(cx+hexHalfW, cy-hexR+lengthX);
          ctx.lineTo(cx+hexHalfW, cy+hexR-lengthX);
          ctx.lineTo(cx, cy+hexR);
          ctx.lineTo(cx-hexHalfW, cy+hexR-lengthX);
          ctx.lineTo(cx-hexHalfW, cy-hexR+lengthX);
          ctx.lineTo(cx, cy-hexR);
          ctx.fill();
      }
  
      function draw()
      {
          var canvas = document.getElementById('tutorial');
          if (canvas.getContext)
          {
              var ctx = canvas.getContext('2d');
  
              //Pick Hexagon color, this one will be blue
              ctx.fillStyle = "rgb(0, 0, 255)";   DrawHex(ctx, 1, 1);
              ctx.fillStyle = "rgb(0, 0, 225)";   DrawHex(ctx, 3, 1);
              ctx.fillStyle = "rgb(0, 0, 195)";   DrawHex(ctx, 4, 1);
              ctx.fillStyle = "rgb(0, 0, 165)";   DrawHex(ctx, 6, 1);
  
              ctx.fillStyle = "rgb(0, 255, 0)";   DrawHex(ctx, 3, 2);
              ctx.fillStyle = "rgb(0, 225, 0)";   DrawHex(ctx, 4, 2);
              ctx.fillStyle = "rgb(0, 195, 0)";   DrawHex(ctx, 5, 2);
          }
      }
  </code></pre>
  
  <p>I would like to draw these primitives in "perspective": closer shapes (in the bottom of the screen) will be bigger, shapes "far away" (in the top of the screen) needs to be smaller... </p>
  
  <p>For this purpose shapes coordinates are needs to be recalculated.</p>
  
  <p>Guess, I could find some formulas that allows to recalculate coordinates and write a proper functions... but, probably, there are some engines that already doing that?</p>
  
  <p>Please advise.</p>
  
  <p>Any thoughts are welcome!</p>