title: html5 canvas correctly draw a cube
body: <p>I'm just trying out <strong>HTML5 canvas</strong> and I'm trying to correctly draw an isometric cube</p>
  <p>Here's my current code to draw an isometric cube:</p>
  <pre><code>function drawCube(x, y, wx, wy, h, color) {
      // left face
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x - wx, y - wx * 0.5);
      ctx.lineTo(x - wx, y - h - wx * 0.5);
      ctx.lineTo(x, y - h * 1);
      ctx.closePath();
      ctx.fillStyle = &quot;#838357&quot;
      ctx.strokeStyle = &quot;#7a7a51&quot;;
      ctx.stroke();
      ctx.fill();
  
      // right face
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + wy, y - wy * 0.5);
      ctx.lineTo(x + wy, y - h - wy * 0.5);
      ctx.lineTo(x, y - h * 1);
      ctx.closePath();
      ctx.fillStyle = &quot;#6f6f49&quot;;
      ctx.strokeStyle = &quot;#676744&quot;;
      ctx.stroke();
      ctx.fill();
  
      // center face
      ctx.beginPath();
      ctx.moveTo(x, y - h);
      ctx.lineTo(x - wx, y - h - wx * 0.5);
      ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
      ctx.lineTo(x + wy, y - h - wy * 0.5);
      ctx.closePath();
      ctx.fillStyle = &quot;#989865&quot;;
      ctx.strokeStyle = &quot;#8e8e5e&quot;;
      ctx.stroke();
      ctx.fill();
  }
  </code></pre>
  <p>I have two problems with this:
  <br><br></p>
  <h2>First issue</h2>
  <hr />
  <p>There's some pixel issues/faces are overlapping that you can see when you scale the canvas:</p>
  <p><a href="https://i.stack.imgur.com/b6B3P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6B3P.png" alt="Image of incorrect cube" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.createElement("canvas");
  var ctx    = canvas.getContext('2d');
  
  canvas.width  = 800;
  canvas.height = 800;
  
  document.body.appendChild(canvas);
  
   
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    var sizeX = 32;
    var sizeY = 32;
    var sizeZ = 8; 
     
    ctx.scale(5, 5);
   
    drawCube(50, 50, sizeX, sizeY, sizeZ);
  }
  
  requestAnimationFrame(draw);
  
  
  function drawCube(x, y, wx, wy, h, color) {
      // left face
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x - wx, y - wx * 0.5);
      ctx.lineTo(x - wx, y - h - wx * 0.5);
      ctx.lineTo(x, y - h * 1);
      ctx.closePath();
      ctx.fillStyle = "#838357"
      ctx.strokeStyle = "#7a7a51";
      ctx.stroke();
      ctx.fill();
  
      // right face
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + wy, y - wy * 0.5);
      ctx.lineTo(x + wy, y - h - wy * 0.5);
      ctx.lineTo(x, y - h * 1);
      ctx.closePath();
      ctx.fillStyle = "#6f6f49";
      ctx.strokeStyle = "#676744";
      ctx.stroke();
      ctx.fill();
  
      // center face
      ctx.beginPath();
      ctx.moveTo(x, y - h);
      ctx.lineTo(x - wx, y - h - wx * 0.5);
      ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
      ctx.lineTo(x + wy, y - h - wy * 0.5);
      ctx.closePath();
      ctx.fillStyle = "#989865";
      ctx.strokeStyle = "#8e8e5e";
      ctx.stroke();
      ctx.fill();
  }</code></pre>
  </div>
  </div>
  </p>
  <br>
  <h2>Second issue</h2>
  <hr />
  <p>How can I figure out the required canvas width/height to draw the entire cube, and then set the cube to the beginning of the canvas? (x &amp; y = 0)</p>
  <p><br><br>
  What am I doing wrong for the first issue? And what about the second? Could I get an example/snippet with these issues fixed?</p>