Creating a canvas on top of an SVG (or other image

Question

The reason for asking this question is because I want to be able to draw an arrow between two svg images. I want to use canvas to create the arrows, so firstly I generate the svgs then place a canvas on top of them to be able to draw the arrows.

I've tried using style=... but haven't had any luck as everytime I add the canvas element it just pushes my svg images to another pl

If there's no easy way to do this I'll just create arrows using SVG, I figured it would be more efficient to use canvas if I had to do lots of arrows in a short amount of time.

Answer 1

have you tried z-index? it's a useful css trick

#svgcontent
{
z-index:1
}
#html5content
{
z-index:3
}

EDIT: accidentally screwed the #s up. 'scuse me.

Answer 2

You need position:absolute on the CSS for the canvas to take it out of the flow, and then you can layer it as you like using z-index.

However, I instead suggest that you can use one or two tiny canvases to create the arrowheads and use toDataURL() on them to create a url you can use for <image> tags in the SVG. This way all your graphics are in SVG but you can use the canvas for complex raster effects if you need to.