javascript - drawImage (canvas) is not working -
i want draw multiple canvases on single canvas using drawimage()
method not working code
<html> <head> <script> window.onload = function() { var context1= document.getelementbyid("canvas1").getcontext("2d"); var context2 = document.getelementbyid("canvas2").getcontext("2d"); var context3 = document.getelementbyid("canvas3").getcontext("2d"); context1.font = "20pt calibri"; context1.fillstyle = "blue"; context1.filltext("hello ", 50, 25); context2.font = "20pt calibri"; context2.fillstyle = "red"; context2.filltext("world!", 100, 25); var imageobj = new image(); imageobj.onload = function() { context3.drawimage(context1.canvas, 50, 25); context3.drawimage(context2.canvas, 100, 25); }; }; </script> </head> <body> <canvas id="canvas1" class="canvas" width="200" height="50"></canvas> <canvas id="canvas2" class="canvas" width="200" height="50"></canvas> <canvas id="canvas3" class="canvas" width="200" height="50"></canvas> </body> </html>
js fiddle http://jsfiddle.net/4xt2j/2/
your images have no source. add 1 if want see something. onload function cannot called long don't have src.
and must provide image drawimage function :
var imageobj = new image(); imageobj.onload = function() { context3.drawimage(imageobj, 50, 25); context3.drawimage(imageobj, 100, 25); }; imageobj.src = "somefile.png";
if you're trying draw canvas1 , canva2 on context3, outside imageobj.onload function never called : http://jsfiddle.net/kcyve/
a precision following question in comment :
my code in fiddle uses context1.canvas
. works because context instance of canvasrenderingcontext2d , has property named canvas
"back-reference canvas element context created".
Comments
Post a Comment