Canvas on the Image

Question

I want to place canvas on the image. And size of the canvas must be same as image. Here is my code:

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

var Particle = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
  this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
   this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 10; i++){
 particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

function draw()
{
 ctx.clearRect(0, 0, c.width, c.height)
  
 for(var i = 0; i < particles.length; i++)
    {
      var particle = particles[i];
      particle.YPos += 1;
      
      // Draw image rotated
      ctx.save();

      ctx.save();
      ctx.translate(particle.XPos + particle.Sprite.width / 2, particle.YPos + particle.Sprite.height / 2);
   ctx.rotate( particle.Rotation );
   ctx.translate(-(particle.XPos + (particle.Sprite.width / 2)), -(particle.YPos));
      ctx.drawImage(particle.Sprite, particle.XPos, particle.YPos);
      ctx.restore();

      ctx.restore();
      
      if(particle.YPos > c.height)
        {
          particle.YPos = 0;
          particle.XPos = Math.random()*c.width;
        }
      
      particle.Rotation += 0.01;
    }
}

setInterval(draw, 3);

#myCanvas{

}

<canvas id="myCanvas" width="100%" height="100%"></canvas>
<img src="http://krishna73.ru/images/back2.jpg" width=100%>

Now canvas does not cover picture and is located just above it. And size does not fit the picture. Please help me.

Try taking a look at this http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div — Canvas, Jan 04 '16 at 08:55

score 1 · Accepted Answer · answered Jan 04 '16 at 09:03

Try this:

var container = document.getElementById("container"),
    image     = document.getElementById("image"),
            c = document.getElementById("myCanvas"),
          ctx = c.getContext("2d");

container.style["height"] = image.height;
container.style["width"]  = image.width;

c.setAttribute("height", image.height);
c.setAttribute("width", image.width);

Apply following CSS

.canvas-image-container {
  position:relative;
}
.canvas-image-container #myCanvas {
  position:absolute;
  top:0;
  left:0;
  z-index:9;
}

var container = document.getElementById("container"),
    image     = document.getElementById("image"),
            c = document.getElementById("myCanvas"),
          ctx = c.getContext("2d");


container.style["height"] = image.height;
container.style["width"]  = image.width;

c.setAttribute("height", image.height);
c.setAttribute("width", image.width);


var Particle = function(xSet, ySet)
{
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
  this.Sprite.src = "http://s.cdn.gaiaonline.com/images/thumbnails/85449184bbb9.png";
   this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 40; i++){
 particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

function draw()
{
 ctx.clearRect(0, 0, c.width, c.height)
  
 for(var i = 0; i < particles.length; i++)
    {
      var particle = particles[i];
      particle.YPos += 1;
      
      // Draw image rotated
      ctx.save();

      ctx.save();
      ctx.translate(particle.XPos + particle.Sprite.width / 2, particle.YPos + particle.Sprite.height / 2);
   ctx.rotate( particle.Rotation );
   ctx.translate(-(particle.XPos + (particle.Sprite.width / 2)), -(particle.YPos));
      ctx.drawImage(particle.Sprite, particle.XPos, particle.YPos);
      ctx.restore();

      ctx.restore();
      
      if(particle.YPos > c.height)
        {
          particle.YPos = 0;
          particle.XPos = Math.random()*c.width;
        }
      
      particle.Rotation += 0.01;
    }
}

setInterval(draw, 3);

.canvas-image-container {
  position:relative;
  width:100%;
  height:100%;
  display:block;
}
.canvas-image-container #myCanvas {
  position:absolute;
  top:0;
  left:0;
  z-index:9;
}

<div class="canvas-image-container" id="container">
    <canvas id="myCanvas" width="100%" height="100%"></canvas>
    <img src="http://krishna73.ru/images/back2.jpg" id="image">
</div>

Canvas on the Image

1 Answers1