canvas.drawImage(canvas, 0,0) getting Type Error

Question

I am trying to copy the image from one canvas to another canvas. I have seen an answer saying that an easy way to do it is:

var Scanvas = $("#sourceCanvas");

var Scontext = Scanvas.get(0).getContext("2d");

var Dcanvas = $("#destinationCanvas");

var Dcontext = Scanvas.get(0).getContext("2d");

//draw something in Scanvas

Dcontext.drawImage(Scanvas, 0 ,0);

However, whenever I try this I keep getting a Type Error. The browser I am using is an up-to-date version of Google Chrome, so I don't think that is the problem.

Should be: `var Dcontext = Dcanvas.get(0).getContext("2d");` — Shmiddty, Oct 24 '12 at 20:23
Currently you are trying to draw the source canvas to itself. — Shmiddty, Oct 24 '12 at 20:24
read thisi questionhttp://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally — Fatima Zohra, Oct 25 '12 at 09:17

Mikko Ohtamaa · Answer 1 · 2012-10-26T09:16:49.520

0

You are using a jQuery object as the first parameter of drawImage().

It needs to be a pure DOM object.

You can access the underlying DOM objects in jQuery by calling get() and specifically get(0) if there is only one object in jQuery selection, as mentioned in the comments.

   DContext.drawImage(Scanvas.get(0),....)

edited Oct 26 '12 at 09:16

answered Oct 26 '12 at 09:05

Mikko Ohtamaa

82,057
50
264
435

canvas.drawImage(canvas, 0,0) getting Type Error

1 Answers1