translate() method not working in jCanvaScript for HTML5 canvas?

Question

I am using jCanvasSript for canvas animation.

I put an image element in a canvas and then want to move it using the translate method.

Is this possible and if so, how do I implement my desired behviour?

My code:

HTML:

<canvas id="bug_animte" width="990" height="285">
    This text is displayed if your browser 
    does not support HTML5 Canvas.
</canvas>

Javascript:

function start_1(idCanvas)
{
    jc('#myCircle_1').translate(50,20);
}
function onload_1(idCanvas) 
{   
    var img=new Image();
    img.src="images/body.png";
    img.onload=function(){
        jc.start(idCanvas);
        jc.image(img,100,100).id('myCircle_1');
        jc.start(idCanvas);
    }
}
$(document).ready(function(){
    onload_1('bug_animte');
    var x = setTimeout(function(){
            start_1('bug_animte')                   
    },100);
});

score 0 · Accepted Answer · answered Mar 01 '13 at 05:16

try like this example..

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 150;
      var rectHeight = 75;

      // translate context to center of canvas
      context.translate(canvas.width / 2, canvas.height / 2);

      context.fillStyle = 'blue';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);
    </script>
  </body>
</html>

I want to animate only image. but unfortunately translate() not working with image. — Jamir Khan, Mar 01 '13 at 05:27

translate() method not working in jCanvaScript for HTML5 canvas?

1 Answers1