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.