A general purpose image rotation, position, and scale.
// no need to use save and restore between calls as it sets the transform rather
// than multiply it like ctx.rotate ctx.translate ctx.scale and ctx.transform
// Also combining the scale and origin into the one call makes it quicker
// x,y position of image center
// scale scale of image
// rotation in radians.
function drawImage(image, x, y, scale, rotation){
ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin
ctx.rotate(rotation);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
}
If you wish to control the rotation point use the next function
// same as above but cx and cy are the location of the point of rotation
// in image pixel coordinates
function drawImageCenter(image, x, y, cx, cy, scale, rotation){
ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin
ctx.rotate(rotation);
ctx.drawImage(image, -cx, -cy);
}
To reset the 2D context transform
ctx.setTransform(1,0,0,1,0,0); // which is much quicker than save and restore
Thus to rotate image to the left (anti clockwise) 90 deg
drawImage(image, canvas.width / 2, canvas.height / 2, 1, - Math.PI / 2);
Thus to rotate image to the right (clockwise) 90 deg
drawImage(image, canvas.width / 2, canvas.height / 2, 1, Math.PI / 2);
var image = new Image;_x000D_
image.src = "https://i.stack.imgur.com/C7qq2.png?s=328&g=1";_x000D_
var canvas = document.createElement("canvas");_x000D_
var ctx = canvas.getContext("2d");_x000D_
canvas.style.position = "absolute";_x000D_
canvas.style.top = "0px";_x000D_
canvas.style.left = "0px";_x000D_
document.body.appendChild(canvas);_x000D_
var w,h;_x000D_
function resize(){ w = canvas.width = innerWidth; h = canvas.height = innerHeight;}_x000D_
resize();_x000D_
window.addEventListener("resize",resize);_x000D_
function rand(min,max){return Math.random() * (max ?(max-min) : min) + (max ? min : 0) }_x000D_
function DO(count,callback){ while (count--) { callback(count) } }_x000D_
const sprites = [];_x000D_
DO(500,()=>{_x000D_
sprites.push({_x000D_
x : rand(w), y : rand(h),_x000D_
xr : 0, yr : 0, // actual position of sprite_x000D_
r : rand(Math.PI * 2),_x000D_
scale : rand(0.1,0.25),_x000D_
dx : rand(-2,2), dy : rand(-2,2),_x000D_
dr : rand(-0.2,0.2),_x000D_
});_x000D_
});_x000D_
function drawImage(image, spr){_x000D_
ctx.setTransform(spr.scale, 0, 0, spr.scale, spr.xr, spr.yr); // sets scales and origin_x000D_
ctx.rotate(spr.r);_x000D_
ctx.drawImage(image, -image.width / 2, -image.height / 2);_x000D_
}_x000D_
function update(){_x000D_
var ihM,iwM;_x000D_
ctx.setTransform(1,0,0,1,0,0);_x000D_
ctx.clearRect(0,0,w,h);_x000D_
if(image.complete){_x000D_
var iw = image.width;_x000D_
var ih = image.height;_x000D_
for(var i = 0; i < sprites.length; i ++){_x000D_
var spr = sprites[i];_x000D_
spr.x += spr.dx;_x000D_
spr.y += spr.dy;_x000D_
spr.r += spr.dr;_x000D_
iwM = iw * spr.scale * 2 + w;_x000D_
ihM = ih * spr.scale * 2 + h;_x000D_
spr.xr = ((spr.x % iwM) + iwM) % iwM - iw * spr.scale;_x000D_
spr.yr = ((spr.y % ihM) + ihM) % ihM - ih * spr.scale;_x000D_
drawImage(image,spr);_x000D_
}_x000D_
} _x000D_
requestAnimationFrame(update);_x000D_
}_x000D_
requestAnimationFrame(update);