Select image within canvas with jQuery

Question

I have following JavaScript code:

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var img = new Image;
var x;
img.onload = function(){ ctx.drawImage(img,0,0); };
img.src='img.svg';

After execution of the above code I would like to select the SVG-image with jQuery. To do this I wrote following code $('svg'), but this doesn't work.

Can somebody help me so that I can select the image?

Thank you very much for your help!

Answer 1

The canvas is just a bitmap containing image data, there are no built-in abstract concepts such as objects. What you can do is write to and read from the canvas. That is, as long as no unsecure (i.e. from other domains) are written to the canvas. Unfortunately when writing/drawing SVG to the canvas it's faulty considered to be unsecure content and you will no longer be able to read the bitmap.

Answer 2

The image itself is not available in the DOM, you just created it temporarily to draw it into the canvas. So the canvas holds the content of the image, the image itself is not in the DOM. Nevertheless you can get a hold on the image using $(img), but any manipulation of this element will not show anywhere.