html5 - javascript / canvas5 error from simple code -
error: uncaught exception: [exception... "component returned failure code: 0x80040111 (ns_error_not_available) [nsidomcanvasrenderingcontext2d.drawimage]" nsresult: "0x80040111 (ns_error_not_available)" location: "js frame :: http://127.0.11.1/test/canvas5_b.php :: setup :: line 27" data: no]
function setup() { var e = document.getelementbyid("mycanvas"); var ctx = e.getcontext('2d'); var meter = new image(); meter.src = "meter.jpg"; var meter_bar = new image(); meter_bar.src = "meter_bar.jpg"; //alert(meter); ctx.beginpath();/////////line 27//////////// ctx.drawimage(meter, 50, 100); //ctx.globalcompositeoperation = "lighter"; ctx.drawimage(meter_bar, 68, 123); ctx.closepath(); } window.onload = setup;
both images in right folder. thing gets me works if put alert(meter); before line 27. if not loaded, have running on window.onload, dont see how is.
edit : issue of when image loaded (ty rob). appears best globally declare , set image src, , call window.onload = setup, : (correct me if bad)
var img1, img2; img1 = new image(); img2 = new image(); //declare , set images src img1.src = "meter.jpg"; img2.src = "meter_bar.jpg"; var canvasheight, canvaswidth; canvasheight = 300; canvaswidth= 600; var ctx; function setup() { var e = document.getelementbyid("mycanvas"); ctx = e.getcontext('2d'); draw(); } function draw() { ctx.clearrect(0,0,canvaswidth, canvasheight); ctx.beginpath(); ctx.drawimage(img1, 50, 100); ctx.drawimage(img2, 68, 123); ctx.closepath(); } window.onload = setup;
make sure images loaded first. instance:
var img = new image(); img.onload = function(){ ctx.drawimage(img,0,0); } // put after onload, otherwise onload may // not called if image in cache img.src = 'whatev.png';
Comments
Post a Comment