JonMark Perry JonMark Perry - 24 days ago 6
Javascript Question

HTML5 drawImage()

In HTML5 canvas the function

drawImage()
can take a
Image
, be it a


Argument
image
can be of type
HTMLImageElement
,
HTMLCanvasElement
or
HTMLVideoElement
.


A canvas returns a
HTMLCanvasObject
, how do you get it to return a
HTMLCanvasElement
?

(https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)

Answer

I'm not even sure how you would get a HTMLCanvasObject, but document.getElementById() returns a HTMLCanvasElement which you can use as an argument to drawImage.

   var canvas1 = document.getElementById("canvas1");
   var canvas2 = document.getElementById("canvas2");

   var ctx2 = canvas2.getContext("2d");
   ctx2.drawImage(canvas1, 10, 10);

I'm new to Plunker, but I've cobbled together this little demo: http://plnkr.co/edit/OrZ31Ohnln6lDo181Qo0?p=preview

Comments