Can I place a svg image/element on top a canvas element?

html, html5-canvas, layout, svg

Solution

Same as you place any two elements on top of each other? Give them both a parent with either `position:relative;` or `position:absolute;`. Set the second one (or both) to `position:absolute; left: 0; top:0; z-index: 2;`

<div style="position: relative;">
  <canvas id="c" width="300" height="300"></canvas>
  <img src="http://s.cdpn.io/3/kiwi.svg" 
       style="position: absolute; 
              left: 0; 
              top: 0;
              z-index: 2;
              width: 300px;
       " />
</div>

Example:

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

function rand(r) {
   return Math.random() * r | 0;
}

function draw() {
  ctx.fillStyle ="rgb(" + 
                rand(256) + "," +
                rand(256) + "," +
                rand(256) + ")";
  
  ctx.fillRect(
      -150 + rand(canvas.width), 
      -150 + rand(canvas.height),
      rand(300),
      rand(300));
   requestAnimationFrame(draw);
}
draw();

<div style="position: relative;">
      <canvas id="c" width="300" height="300"></canvas>
      <img src="http://s.cdpn.io/3/kiwi.svg" 
           style="position: absolute; 
                  left: 0; 
                  top: 0;
                  z-index: 2;
                  width: 300px;
           " />
    </div>

This seems like it's already been answered but in the opposite way here

Problem

I am using WebGL to render an image and put it on a canvas. I am wondering is it possible to place an SVG element on top of that canvas? I actually can move the vector image I draw on top of canvas manually. So I suppose there should be a way to do that.

Original source

Related problems