Create a canvas animation on video

Question

Create a canvas animation on video

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I'm doing a small web application where I need to, from some coordinates make a box (rectangle) move frame by frame. In my code I have been able to extract the current frame of the video but I can not make the box move frame by frame, follow the code below (I just left the relevant 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 overlapping canvas windows, one that receives the video, the second where I'm drawing the boxes, does anyone have any idea or reference?

javascript canvas

asked by anonymous 29.04.2016 / 00:35

2 answers

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><scriptsrc="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><divid="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>

29.04.2016 / 20:09

Errors in using the Application.VBE object inside VBA Hybrid applications optimize webview?

score 2 · Accepted Answer

The problem with canvas is that it is like a canvas, what you painted will stay there, unless you even "delete" (paint over).

The method that you are using clearRect is to clean an area, I personally use the fillRect itself since 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 print from the screen and after going through one by one very fast, creating a motion effect.