Animate drawn object in canvas

Question

So I have a drawn object:

and it is placed in a block

I need it to animate it with requestAnimationFrame() method and use translate, rotate, scale while it jumps from the bottom to the top sliding to the right.

The problem is I dont know how to merge all of the shapes I've made to one (or how to animate it).

The code of the shape is:

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

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "white";
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();

ctx.beginPath();
ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
ctx.lineWidth = "5";
ctx.strokeStyle = 'white';
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(40, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(80, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "purple";
ctx.moveTo(80, 10);
ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "cyan";
ctx.moveTo(160, 10);
ctx.lineTo(160, 95);
ctx.lineTo(200, 95);
ctx.stroke();

#myCanvas { background: #F00; }

<canvas id="myCanvas"></canvas>

Thanks in advance.

Answer 1

You dont need a extra canvas tag . You will need to create new object .

Like this for example :

Change enableRotate to true to see rotate in same time .

var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;


var IAM_ANIMATION = {

  globalLeft : 0 ,  // increment all x 
  globalTop : 0 , // increment all y 
  rotate : 0 , // rotate angle 
  speed : 0.1 ,
  enableRotate : false , 
  translate : function (){

      // look at 
      // http://stackoverflow.com/questions/13849185/moving-an-object-along-a-straight-line-at-a-constant-speed-from-point-a-to-b
      // http://jsfiddle.net/loktar/CajbL/
  },

};

draw();


   // just for example i will create interval 

   setInterval( function (){
 
IAM_ANIMATION.globalLeft = IAM_ANIMATION.globalLeft +     
IAM_ANIMATION.speed; 

if (IAM_ANIMATION.enableRotate == true) {
IAM_ANIMATION.rotate = IAM_ANIMATION.rotate + IAM_ANIMATION.speed; 
}
 
  draw()

   } ,10);

outCtx.drawImage(c, 0, 0) 

function draw() {

  ctx.clearRect(0, 0, c.width, c.height);

  ctx.save()

  ctx.rotate( IAM_ANIMATION.rotate * Math.PI/180);

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "white";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 10);
  ctx.lineTo(IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(IAM_ANIMATION.globalLeft +12,IAM_ANIMATION.globalTop + 38, 26, 4.7, Math.PI * .5, false);
  ctx.lineWidth = "5";
  ctx.strokeStyle = 'white';
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo(IAM_ANIMATION.globalLeft + 40, IAM_ANIMATION.globalTop +100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo( IAM_ANIMATION.globalLeft +  80, IAM_ANIMATION.globalTop +100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "purple";
  ctx.moveTo(IAM_ANIMATION.globalLeft +80,IAM_ANIMATION.globalTop + 10);
  ctx.bezierCurveTo(IAM_ANIMATION.globalLeft +100, IAM_ANIMATION.globalTop + 145, IAM_ANIMATION.globalLeft +150, IAM_ANIMATION.globalTop +100,IAM_ANIMATION.globalLeft + 145, IAM_ANIMATION.globalTop +10);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "cyan";
  ctx.moveTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 10);
  ctx.lineTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 95);
  ctx.lineTo( IAM_ANIMATION.globalLeft + 200,IAM_ANIMATION.globalTop + 95);
  ctx.stroke();


  ctx.restore();


}

<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>
 <style>canvas { background: #F00; }</style>

Next level is to create class PAUL : for example var NEW_PAUL = new PAUL("enter text");

I build whole system support for canvas object. My idea is one canvas for user visible view . See more about my canvas code : https://bitbucket.org/nikola_l/visual-js

Rotate and translate View it all at jsFiddle online examples

Answer 2

You can draw the content of another canvas on your "output" canvas using drawImage (see MDN). This example shows how to scale the image using the dWidth and dHeight parameters:

var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;
draw();

outCtx.drawImage(c, 0, 10, 150, 150) 

function draw() {
  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "white";
  ctx.moveTo(10, 10);
  ctx.lineTo(10, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
  ctx.lineWidth = "5";
  ctx.strokeStyle = 'white';
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo(60, 10);
  ctx.lineTo(40, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "green";
  ctx.moveTo(60, 10);
  ctx.lineTo(80, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "purple";
  ctx.moveTo(80, 10);
  ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth = "5";
  ctx.strokeStyle = "cyan";
  ctx.moveTo(160, 10);
  ctx.lineTo(160, 95);
  ctx.lineTo(200, 95);
  ctx.stroke();
}

canvas { background: #F00; }

<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>