Now the image will be moved without rotating. I have implemented moving functionalities, but it only supports IE10.
Here is the script I am using:
var ball = new Image;
window.onload = function () {
var c = document.getElementsByTagName('canvas')[0];
var w = c.width = 800;
var h = c.height = 600;
var ctx = c.getContext('2d');
var dx = -1, dy = 0;
var x = 400, y = 200, a = 0;
var deg2rad = Math.PI / 180;
var da = 10 * deg2rad;
var bw = ball.width;
var bh = ball.height;
setInterval(function () {
ctx.clearRect(0, 0, w, h);
ctx.translate(x, y);
ctx.rotate(a);
ctx.drawImage(ball, -bw, -bh);
ctx.rotate(-a);
ctx.translate(-x, -y);
x += dx;
y += dy;
if ((x - bw < 0) || (x + bw > w)) {
dx *= -1; da *= -1;
}
if ((y - bh < 0) || (y + bh > h)) {
dy *= -1; da *= -1;
}
}, 30);
}
ball.src = 'images/beachball.png';
This is my HTML design:
<canvas id="canvas" width="300" height="300"></canvas>
If anybody can help me, thank you in advance!