Filling pseudo 3D canvas shapes -

currently i'm playing around pseudo 3d shapes in canvas 2d context. however, stuck yet @ filling shape sides.

here's drawing function wrote:

shape.prototype.draw = function (ctx) {     var offsetx = ctx.canvas.width / 2;     var offsety = ctx.canvas.height / 2;      var = this.edges.length;     while (i--) {         var vertex1 = this.rotatedvertexs[ this.edges[i][0] ];         var vertex2 = this.rotatedvertexs[ this.edges[i][1] ];          ctx.beginpath();         ctx.moveto(vertex1[0] + offsetx, vertex1[1] + offsety);         ctx.lineto(vertex2[0] + offsetx, vertex2[1] + offsety);         ctx.fill();         ctx.stroke();     } }; 

...and simple example fiddle: http://jsfiddle.net/artsinn/xyzyu/

any ideas i'm doin' wrong?

your drawing function works in "lines", not "faces" of square.

you cannot fill line. need @ least 2 lines in same path create fill-able area. (note every time you're calling beginpath, you're making new path. longest path ever 1 line segment)

if @ drawing 3 of lines have, this:

there's no "face" fill there, , need reorganize code until you're drawing difference faces of square @ once, have fill.