Home/ Questions/Q 7682479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T18:34:41+00:00

I need help with making an image float onto the canvas in HTML5 and

  • 0

I need help with making an image float onto the canvas in HTML5 and JavaScript. I have been googling around and have not found anything. I can draw shapes on the screen but I dont know how to animate them.
I want couple of different images to float in on the canvas from different directions.
Can someone please help me with this? after 4 hours of googling all I could do was this

<script type = "Text/JavaScript">
                function Animate(){
                var canvas=document.getElementById("myCanvas"); 
                var ctx=canvas.getContext("2d"); 

                var img = new Image();

                img.onload = function ()
                {
                    ctx.drawImage(img,20,20,300,300);

                };
                img.src = "vb.png";
                }
             </script> 
    </head> 
<body> 
<canvas id="myCanvas" height="200" width="800"></canvas>
<br><button onclick="Animate();">Restart</button>

There seem to be plenty of tutorials on animating shapes but I want to load up my own pictures and have them fly in onto the canvas.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this very basic demo of a canvas animation:

    http://jsfiddle.net/bDQ6b/2/

    window.addEventListener('load', function () {
  var
    img = new Image,
    ctx = document.getElementById('myCanvas').getContext('2d');

  img.src = 'http://www.gravatar.com/avatar/a1f80339c0cef95be6dc73e0ac510d5d?s=32&d=identicon&r=PG';
  img.addEventListener('load', function () {

    var interval = setInterval(function() {
      var x = 0, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, x, y);

        x += 1;
        if (x > ctx.canvas.width) {
          x = 0;
        }
      };
    }(), 1000/40);
  }, false);
}, false);

    There is a lot which could be done better though. E.g.:

    • using requestAnimationFrame instead of an interval

    • preloading the images in a more convenient way

    • using velocities and time differences (from last to current frame) instead of fixed increments

    • and many more

    but, as all this would make the example way too complicated, I’ll leave it as it is and hope you’ll read up on those topics while learning.

    • 0