Creating a canvas on top of SVG (or another 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 the canvas to create arrows, so first I create svgs and then lay the canvas on top of them to draw the arrows.

I tried using style = ... but I had no luck, since every time I add a canvas element, it just pushes my svg images to another pl

If there is no easy way to do this, I just create arrows using SVG, I thought it would be more efficient to use the canvas if I had to make a lot of arrows in a short amount of time.

Answer 1

You need position:absolute in CSS for the canvas to pull it out of the stream, and then you can fold it as you like using z-index .

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

Answer 2

Have you tried z-index? this is a useful css trick

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

EDIT: accidentally wound #s up. "Excuse me.