hmtl5 canvas: transparant animation on top of website elements

Question

How do I put the canvas on top of my website, with position: absolute, so that my animation happens on top of my regular website. Now when I animate, the canvas background becomes white so I can't see my website. BUT I want to see both my website and the animation that is lying on top of it.?

My end goal is to have tiny circles follow my fingers when I touch the screen on a mobile phone, but before I can achieve that, I have to know that I can animate on top of other elements first. At least, that is what I think at the moment.

Please help :)

The answers and comments on [this question](http://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5) might help. — Jon, Oct 26 '16 at 21:16

score 0 · Answer 1 · answered Oct 27 '16 at 06:56

Use ctx.clearRect() for your animation. I also added background-color:transparent just in case, but it works without it.

var ctx = canvas.getContext('2d');
canvas.height = innerHeight;
canvas.width = innerWidth;
function rad(deg){
   return deg*Math.PI/180; 
 }
var t = 360;
function loop(){
    requestAnimationFrame(loop);
    ctx.clearRect(0,0,innerHeight,innerWidth);
    ctx.beginPath();
    ctx.arc(100+50*Math.sin(rad(t)),100+50*Math.cos(rad(t)),40+20*Math.sin(rad(t)),0,Math.PI*2);
    ctx.fillStyle='rgba(255,255,20,0.8)';
    ctx.strokeStyle='red';
    ctx.lineWidth = 5;
    ctx.fill();
    ctx.stroke();
   
  
    t=t>0?t-5:360;
    
  }
loop();

canvas{
  position:absolute;
  background-color:transparent;
  }

<canvas id=canvas></canvas>
<h1>
  Your website.
</h1>
<h2>
  Words words words.
</h2>
words words words words

Thanks a lot for the answer. Much appreciated! – molleweide Oct 30 '16 at 11:06 — molleweide, Oct 30 '16 at 11:06

hmtl5 canvas: transparant animation on top of website elements

1 Answers1