javascript - Drawing an image inside canvas -

this jsfidle : http://jsfiddle.net/2ydnq/

i can't figure out doing wrong. trying draw first tiles of image inside canvas nothing happening .

function character(x, y, speed, tilespos, tilesrow) {             this.x = x;             this.y = y;             this.w = 25;             this.h = 25;             this.sp = speed;             this.pos = tilespos;             this.row = tilesrow;             this.maxtiles = 11;         }          character.prototype.draw = function () {             ctx.drawimage(charimg, this.pos * this.w, this.w * this.row, this.w, this.h, this.x, this.y, this.w, this.h);         };         var character = new character(cw / 2, (ch - 25), 1, 1, 1);         function draw() {             ctx.clearrect(0, 0, cw, ch);             if (charimg.complete){                 character.draw();             }          } 

you're never setting width , height properties of canvas. default size of 300x150. you're drawing image outside of dimensions thats why you're not seeing it. if use css resize it, stretches canvas fit dimensions distorting image, not changing canvas coordinate system.

live demo

i added/changed these lines.

   var canvas = $('#my_canvas')[0];    canvas.width = 400;    canvas.height = 400;    var ctx = canvas.getcontext("2d"); 

also heads don't need jquery if you're working canvas element, adds unneeded overhead.

also animations instead of using setinterval highly recommend checkout requestanimationframe