html5 - Javascript, Access to canvas methods from a variable in a class -

i little stumped. still new javascript, of how works eludes me when comes classes , objects. had lot of related code got working in simple javascript file, , seemed natural refactor working class. process not going well.

after lot of stackoverflow , google , w3cschool searches, lost.

when building class, seemed natural allow calling environment define canvas context , pass context class can work on it. however, because @ time browser sees it, not defined yet. after doing searching, came following:

function hexgrid () {     this.canvas         = null;                 // (canvas context)     this.bordercolor    = "#ff0000";            // hex border color     this.fillcolor      = "yellow";             // hex fill color     this.hexsize        = 20;                   // hex size default      // draw hex using offset coordinates.     // lets offset first, should easiest.     // “odd-q” vertical layout     this.o_hex = function (x, y) {         var width = this.hexsize * 2;         var horz = 3 / 4 * width;         var vert = math.sqrt (3) / 2 * width;         var hpos = x * (horz);         var vpos = (y * vert) + ( (x%2)*(vert/2) );         this.drawhex(hpos, vpos);     };        // draw hex onto canvas.     this.drawhex = function (in_x,in_y) {         console.log ('canvas = ' + this.canvas);         var ctx = this.canvas;         console.log ('ctx = ' + ctx);         ctx.strokestyle = this.bordercolor;         console.log ('ctx = ' + ctx);         ctx.beginpath();         (var = 0; <= 6; i++) {             angle = 2 * math.pi / 6 *             x_i = in_x + size * math.cos(angle);             y_i = in_y + size * math.sin(angle);             if (i === 0) {                 ctx.moveto (x_i, y_i);             } else {                 ctx.lineto (x_i, y_i);             }         }         ctx.fillstyle=this.fillcolor;         ctx.fill();         ctx.stroke();     };   }  ////  testing code ////// function main () {     hex = new hexgrid;     hex.canvas = document.getelementbyid('canvas_1');      (var x = 0; x <= 10; x += 1) {         (var y = 0; y <= 10; y += 1) {             hex.o_hex (x,y);         }     } } 

and getting following in console:

canvas = [object htmlcanvaselement] hex-a27.js:24 ctx = [object htmlcanvaselement] hex-a27.js:26 ctx = [object htmlcanvaselement] hex-a27.js:28 uncaught typeerror: object #<htmlcanvaselement> has no method 'beginpath' hex-a27.js:29 hexgrid.drawhex hex-a27.js:29 hexgrid.o_hex hex-a27.js:19 main hex-a27.js:53 onload aquarius-a27.php:8 

which suggests me have indeed got canvas reference tucked ctx, says can't find beginpath() method. concerned assignments not going canvas context. correct way of accessing methods of dom elements javascript might not exist @ time code evaluated? (i.e. created later , passed in, or assigned property.)

basically, need type of prototyping (thinking c'ish here) says: "yes, there method called beginpath() , property called strokestyle, so, don't freak out if can find them yet..... or need approach works.

thanks.

this should work:

this.drawhex = function (in_x,in_y) {     console.log ('canvas = ' + this.canvas);     var ctx = this.canvas.getcontext('2d');     console.log ('ctx = ' + ctx);     ctx.strokestyle = this.bordercolor;     console.log ('ctx = ' + ctx);     ctx.beginpath();     (var = 0; <= 6; i++) {         angle = 2 * math.pi / 6 *         x_i = in_x + size * math.cos(angle);         y_i = in_y + size * math.sin(angle);         if (i === 0) {             ctx.moveto (x_i, y_i);         } else {             ctx.lineto (x_i, y_i);         }     }     ctx.fillstyle=this.fillcolor;     ctx.fill();     ctx.stroke();   };