Create an animation on canvas over video

Asked

Viewed 663 times

3

I’m making a small web application where I need, from some coordinates make a box (rectangle) move frame by frame. In my code I was able to extract the current frame of the video but I can’t make the box move frame by frame, follow the code below (I left only the relevente part):

var i;
var canvas2 = document.getElementById("canvas2");
var ctx = canvas2.getContext("2d");

function boundingBoxes(){
  for(i=0; i < 480; i++){
    ctx.strokeRect(i,20,100,100);
    setTimeout(function(){ctx.clearRect(i-2,18,105,105)},3);
  }
}

The video appears above, just below it there are two canvas windows superimposed, one that receives the video, the second where I am drawing the boxes, someone has any idea or reference ?

javascript canvas

2 answers

2


The problem of canvas is that she is like a painting canvas, what you painted will stay there, unless you yourself "erase" (paint over).

The method you are using clearRect serves to clear an area, I personally use own fillRect since from the same I will have to "clean" the screen.

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

var x = 10;
var ani = setInterval(function(){
  ctx.fillStyle="#FFF";
  ctx.fillRect(0, 0, 300, 80);
  ctx.fillStyle="green";
  ctx.fillRect(x, 20, 50, 50);
  x+=5;
  if(x >= 290 - 50){
    clearInterval(ani);
  }
},100);
<canvas id="canvas2" width="300" height="80" style="border:solid 1px #CCC;">
  Seu browser não tem suporte a canvas
<canvas>

Animation with canvas is pure illusion is the same as taking a lot of screen print and after going through one by one very fast, creating a movement effect.

  • Hello @Guilherme Lautert, thanks for the reply, below I put the code I’m using so we can better discuss a solution to the problem, when I draw even blank on the canvas I will overlay the video, so I was using the clearRect function.

  • 1

    Hello again, I managed to accomplish what I was looking for thanks to your code, I will post it as answer below for future research involving the subject, again, thank you!

1

Hello I am posting the resolution of my initial problem that I reached thanks to the contribution of @Guilherme Lautert, I made some modifications so that the canvas does not overlap the video.

<!DOCTYPE html>
<html>

<script src="https://rawgit.com/allensarkisyan/VideoFrame/master/VideoFrame.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="frame">
<span id="currentFrame">0</span>
</div>

<video height="180" width="100%" id="video" controls = "true">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause" onclick="drawCanvas()">Play</button>
</div>

<canvas id="canvas" width="480" height="270"> </canvas>
<canvas id="canvas2" width="480" height="270"> </canvas>

<style>
  body {
    background: black;
    color:#CCCCCC;
  }

  #canvas {
    position: absolute;
    top: 250px;
    left: 485px;
    width:330px;
    border:2px solid blue;}

    #canvas2{
      position: absolute;
      top: 250px;
      left: 485px;
      width:330px;
      border:2px solid blue;}
    }

</style>


<script>

var currentFrame = $('#currentFrame');
var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
        currentFrame.html(frame);
    }
});




$('#play-pause').click(function(){
    ChangeButtonText();
});

function ChangeButtonText(){
  if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $("#play-pause").html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $("#play-pause").html('Play');
    }
  }

document.addEventListener('DOMContentLoaded', function(){
   var v = document.getElementById('video');
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   var ctx = canvas.getContext("2d");
   var cw = Math.floor(canvas.clientWidth);
   var ch = Math.floor(canvas.clientHeight);
   canvas.width = cw;
   canvas.height = ch;
   v.addEventListener('play', function(){
    draw(this,context,cw,ch);
   },false);
  },false);
  function draw(v,c,w,h) {
   if(v.paused || v.ended) return false;
   c.drawImage(v,0,0,w,h);
   setTimeout(draw,20,v,c,w,h);
 }

function drawCanvas(){
 var canvas2 = document.getElementById("canvas2");
 var ctx = canvas2.getContext("2d");

 var x = 10;
 var ani = setInterval(function(){
   ctx.clearRect(x-10, 18, 100, 100);
   ctx.strokeRect(x, 20, 50, 50);
   x+=5;
   if(x >= 290 - 50){
     clearInterval(ani);
   }
 },100);
}

</script>

</html>

Browser other questions tagged javascript canvas

You are not signed in. Login or sign up in order to post.