HTML5 Javascript Canvas Rotation JSFiddle won't run same code with same result -

so did research on canvas rotation, , came across great method of rotating individual objects.(source) in middle of understanding how code worked when, rewriting code, came across strange thing.

here's jsfiddle link:

var canvas = document.getelementbyid('test_canvas'); var ctx = canvas.getcontext('2d');  var buffer = document.createelement('canvas'); buffer.width = buffer.height = 60; var bctx = buffer.getcontext('2d'); bctx.translate(30, 30); bctx.rotate(0.5); bctx.fillstyle = 'rgb(255, 0, 0)'; bctx.fillrect(-15, -15, 30, 30);  ctx.fillstyle = 'rgb(0, 255, 0)'; ctx.fillrect(30, 30, 30, 30); ctx.drawimage(buffer, 50, 50); 

and here's my jsfiddle:

var mycanvas = document.getelementbyid("buffer"); var context = mycanvas.getcontext('2d');  var mycanvas1 = document.createelement('canvas'); mycanvas1.width = mycanvas1.height = 60; var newcontext = mycanvas1.getcontext('2d'); newcontext.translate(30, 30); newcontext.rotate(0.5); newcontext.fillstyle = 'rgb(255, 0, 0)'; newcontext.fillrect(-15, -15, 30, 30);  context.fillstyle = 'rgb(0, 255, 0)'; context.fillrect(30, 30, 30, 30); context.drawimage(buffer, 50, 50); 

they exact copies of 1 except code doesn't rotate object. i've been looking @ code few hours baffled, , i'd told other guy did right.

your problem line:

context.drawimage(buffer, 50, 50); 

the original code used variable called buffer , assigned new canvas element it:

var buffer = document.createelement('canvas'); 

you've named yours:

var mycanvas1 = document.createelement('canvas'); 

but later on drawing image non-existent variable buffer