CODEWITHSUNDEEP
javascripthtmlcanvas
AbbenGabben
AbbenGabben

Reputation: 107

Canvas Oscillating an image

I'm trying to get an image to oscillate. But i'm having some issues. I'm using this tutorial http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

and I tried changing line 55-61 of the tutorial to load the image src. But it's not displaying anything.

Any advice?

<canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

      function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
      }
      function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = (new Date()).getTime() - startTime;
        var amplitude = 150;

        // in ms
        var period = 2000;
        var centerX = canvas.width / 2 - myRectangle.width / 2;
        var nextX = amplitude * Math.sin(time * 2 * Math.PI / period) + centerX;
        myRectangle.x = nextX;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw
        drawRectangle(myRectangle, context);

        // request new frame
        requestAnimFrame(function() {
          animate(myRectangle, canvas, context, startTime);
        });
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myRectangle = new Image();
                        myRectangle.src = "http://www.skilledsoldiers.com/e107_plugins/aacgc_gamelist/icons/dota2_icon.png";
                        myRectangle.onload = function()
      };

      drawRectangle(myRectangle, context);

      // wait one second before starting animation
      setTimeout(function() {
        var startTime = (new Date()).getTime();
        animate(myRectangle, canvas, context, startTime);
      }, 1000);
    </script>

Upvotes: 1

Views: 514

Answers (1)

Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

You need to use context.drawImage instead of trying to draw a rectangle with an image.

function drawImage(myRectangle, context) {
    context.drawImage(myRectangle.img, myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);   
}

See this fiddle: http://jsfiddle.net/fb4vS/

Upvotes: 1

Related Questions