キャンバスAPIがラインエラーを描画します。 （キューブを描こうとする）

Question

ベクトル座標を使ってキャンバス平面に「キューブ」を描画しようとしていますが、2つの四角形を描くことはできますが、変換関数内の4つの線でそれらを接続することはできません私が推測することができない理由のために働くようです。任意の提案や助けを感謝します。ここでJSビンhttp://jsbin.com/rozelenocu/1/edit?html,js,output

function Vector(x, y){ 
    this.x = x; 
    this.y = y; 
} 

Vector.prototype.plot = function(other){ 
    return new Vector(this.x + other.x, this.y + other.y); 
} 

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



function cube(pos, size, z){ 
    var s1 = square(pos, size); 
    var s2 = square(pos + z, size); 
    translate(s1, s2); 
} 

function square(pos, size){ 

    var shape = []; 

    shape.push(new Vector(pos + size, pos)); 
    shape.push(new Vector(pos + size, pos + size)); 
    shape.push(new Vector(pos, pos + size)); 
    shape.push(new Vector(pos, pos)); 


    ctx.beginPath(); 
    var line = 0; 

    ctx.moveTo(pos, pos); 
    while(line < shape.length) { 
     ctx.lineTo(shape[line].x, shape[line].y); 
     console.log(shape[line].x); 
     line++; 
    } 
    ctx.stroke(); 

    return shape; 
} 

function translate(arr1, arr2) { 
    ctx.beginPath(); 
    arr1.forEach(function(_, i){ 
     console.log(i); 
     ctx.moveTo(arr1[i].x, arr1[i].y); 
     ctx.lineTo(arr2[i].x, arr2[i].y); 
    }); 
    ctx.closePath(); 
} 

cube(50, 20, 10); 

Answer 1

それが問題を引き起こしたctx.closepathだったのです。私はそれをctx.stroke（）に変更しました。