title: Rotating a moving Object along a path in HTML5 canvas
body: <p>I've created a static background in one layer of a canvas element and then trying to move the rectangular object that I've created to go through the cylinder, pipe and then it should fall into the small cylinder at the end of the pipe. I'm able to move it along a straight line but I have to rotate the object (say -25 degrees) and then make it travel horizontally (180 degrees, when it is travelling in y direction inside the pipe).
  The code :</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;section&gt;
  &lt;div id="canvasesdiv" style="position:relative; width:650px; height:600px"&gt;
  &lt;canvas id="layer1"
  style="z-index: 1;
  position:absolute;
  left:0px;
  top:0px;
  " height="600px" width="650"&gt;
  &lt;/canvas&gt;
  
  &lt;canvas id="layer2"
  style="z-index: 2;
  position:absolute;
  left:0px;
  top:0px;
  " height="600px" width="650"&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;button onclick="start()"&gt;Start&lt;/button&gt;
  &lt;button onclick="stop()"&gt;Stop&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  
  var requestId = 0;
  var animationStartTime=0;
  var speed=1;
  var posX=160;  //for cylinder
  var posY=posX+50;  //for cylinder 
  var x=160; //for packets  
  var y=230; //for packetsvar time=1000;
  //var time=1000;
  var layer1;
  var layer2;
  var ctx;
  var ctx2;
  
  var pack=setInterval(drawPacket,1500);
  
  function packet(){
  layer1 = document.getElementById("layer1");
  ctx = layer1.getContext("2d");
  
  layer2 = document.getElementById("layer2");
  ctx2 = layer2.getContext("2d");
  window.onload=drawScreen();
  
  }
  
  function animate() {
  ctx2.clearRect(0,0,layer2.width,layer2.height);
  requestAnimationFrame = window.mozRequestAnimationFrame    ||
                window.webkitRequestAnimationFrame ||
                  window.msRequestAnimationFrame     ||
                  window.oRequestAnimationFrame
                  ;  
  requestId = window.requestAnimationFrame(animate);
  
  anime();
  }
  
  function anime(){
  if ( x&gt;=0 || x&lt;=445){
  drawPacket();
  x+=speed;
  }
  
  if( posXX==445 &amp;&amp; posYY==230){
  y+=-speed;
  }}
  
  function drawPacket(){
  ctx2.beginPath();
  ctx2.clearRect(0,0,layer2.width,layer2.height);
  ctx2.rect(x,y, 10, 30);
  ctx2.closePath();
  ctx2.stroke();
  ctx2.restore();
  }
  
  function redrawPacket(){
  ctx2.beginPath();
  ctx2.clearRect(0,0,layer2.width,layer2.height);
  ctx2.rotate( (Math.PI / 180) * -25);  //rotate 25 degrees.
  ctx2.rect(x,y, 10, 30);
  ctx2.closePath();
  ctx2.stroke();
  }
  
  function start() {
  requestId = window.requestAnimationFrame(animate);
  }
  
  function stop() {
    if (requestId)
      window.cancelAnimationFrame(requestId);
    requestId = 0;
  }
  
  function  drawScreen() {
  
  ctx.beginPath();
  {
  //top line
  ctx.moveTo(250,215);
  ctx.lineTo(390,215);
  
  
  //bottom line
  ctx.moveTo(250,315);
  ctx.lineTo(390,315);
  
  //front  curve
  ctx.moveTo(230,230);
  ctx.quadraticCurveTo(250,200,269,230);
  
  //bottom curve
  ctx.moveTo(230,300);
  ctx.quadraticCurveTo(250,330,268,300);
  
  
  //front arc joining top and bottom opp curve
  ctx.moveTo(230,230);
  ctx.quadraticCurveTo(214,265,230,300);
  
  
  //front opp arc joining top and bottom opp curve
  ctx.moveTo(269,230);
  ctx.quadraticCurveTo(286,265,268,300);
  
  //ctx.moveTo(230,230);
  //ctx.fillRect(230,230,188.80,170);
  
  //back small top curve
  ctx.moveTo(390,215);
  ctx.quadraticCurveTo(407,218,414,230);
  
  //back small bottom curve
  ctx.moveTo(390,315);
  ctx.quadraticCurveTo(405,314,414,300);
  
  //back arc
  ctx.moveTo(414,230);
  ctx.quadraticCurveTo(435,263,414,300);
  
  ctx.stroke();
  ctx.closePath();
  }
  
  ctx.beginPath();
  
  {
  //First Cylinder
  //First cylinder 1st line of rect
  ctx.moveTo(574,130);
  ctx.lineTo(574,195);
  
  //First cylinder opp line of rect
  ctx.moveTo(614,130);
  ctx.lineTo(614,195);
  
  //First cylinder bottom arc
  ctx.moveTo(574,195);
  ctx.quadraticCurveTo(594,205,614,195);
  
  //First cylinder top-top arc
  ctx.moveTo(574,130);
  ctx.quadraticCurveTo(594,119,614,130);
  
  //First cylinder top-bottom arc
  ctx.moveTo(574,130);
  ctx.quadraticCurveTo(594,142,614,130);
  ctx.stroke();
  ctx.closePath();
  }
  
  ctx.beginPath();
  {
  //Second Cylinder
  //Second cylinder 1st line of rect
  ctx.moveTo(574,428);
  ctx.lineTo(574,493);
  
  //Second cylinder opp line of rect
  ctx.moveTo(614,428);
  ctx.lineTo(614,493);
  
  //drawellipse(574,428,10,2,0.5) 
  
  //Second cylinder bottom arc
  ctx.moveTo(574,493);
  ctx.quadraticCurveTo(594,503,614,493);
  
  //Second cylinder top-top arc
  ctx.moveTo(574,428);
  ctx.quadraticCurveTo(594,417,614,428);
  
  //Second cylinder top-bottom arc
  ctx.moveTo(574,428);
  ctx.quadraticCurveTo(594,440,614,428);       
  ctx.stroke();
  ctx.closePath();
  }
  
  
  ctx.beginPath();
  
  {
  //Pipe to cylinder 1
  //top line from main cylinder
  ctx.moveTo(408,222);
  ctx.lineTo(436,222);
  
  //left line from main cylinder
  ctx.moveTo(436,222);
  ctx.lineTo(436,32);
  
  //bottom line from main cylinder
  ctx.moveTo(423,266);
  ctx.lineTo(486,266);
  
  //right line from main cylinder
  ctx.moveTo(486,266);
  ctx.lineTo(486,82);
  
  //top line from left line
  ctx.moveTo(436,32);
  ctx.lineTo(619,32);
  
  //bottom line from right line
  ctx.moveTo(486,82);
  ctx.lineTo(566,82);
  
  //drop line to cylinder right
  ctx.moveTo(619,32);
  ctx.lineTo(619,112);
  
  //drop line to cylinder left
  ctx.moveTo(566,82);
  ctx.lineTo(566,112);
  //closing the pipe
  ctx.moveTo(566,112);
  ctx.quadraticCurveTo(592,128,619,112);
  ctx.moveTo(566,112);
  ctx.quadraticCurveTo(592,96,619,112);
  ctx.stroke();
  ctx.closePath();
  }
  }
  packet();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help me solve this problem..
  Thanks in advance..</p>