Rotating Objects in HTML5 Canvas

Question

Very new to Canvas. I've created an object "Triangle" and have figured out how to instantiate it and have it move along the x and y axis. I've even figured out how to add interactivity (on mouse hover, object changes direction). The thing that's getting me is rotate. I've tried a million ways but just do not understand how to do it. I've managed to get the entire group of objects to rotate seemingly at point 0, 0. I'd like each object to rotate on its own axis. Any help would be appreciated!

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://i.imgur.com/efLA0Or.jpg?1", "https://i.imgur.com/efLA0Or.jpg?1"];
img.src = imgArray[randomNumber];


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}


var mouse = {
  x: undefined,
  y: undefined
}

window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})

function Circle(x, y, dx, dy, radius, rotation) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {

    c.drawImage(img, this.x, this.y, 100, 100);
  }

  this.update = function() {

    c.rotate(rotation);

    if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }

    this.y += this.dy;

    //interactivity
      if (mouse.x - this.x < 100 && mouse.x - this.x > -100
          && mouse.y - this.y < 100 && mouse.y - this.y > -100
      ) {
        this.dx = -dx * 2;
        this.dy = -dy * 2;
    }
    this.draw();
  }

}


var circleArray = [];

for (var i = 0; i < 100; i++) {
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius * 2) + radius;
  var dx = (Math.random() - 0.5) * 1;
  var dy = (Math.random() - 0.5) * 1;
  var radius=30;
  var rotation = Math.PI/180;


  circleArray.push(new Circle(x, y, dx, dy, radius, rotation));


}



  function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (var i = 0; i < circleArray.length; i++){
      circleArray[i].update();
    }


  }

  animate();

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="canvas.css">
<script src="canvas.js"></script>
</head>

<body>
  <div id="container">
<canvas></canvas>
<script src="canvas.js"></script>
</div>
</body>
</html>

Possible duplicate of [HTML5 Canvas Rotate Image](https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image) — Kaiido, Nov 01 '18 at 22:38

score 0 · Accepted Answer · answered Nov 02 '18 at 09:11

You had some errors. This is why it didn't work. You had a few undeclared variables. Also: I would do the mouse detection differently.

I've putted the rotation in the Circle's draw method. Since the method is called Circle I've clipped your images to a circle. If you don't want this please remove the arc and the clip part.

var canvas = document.querySelector('canvas');

var innerWidth = canvas.width = window.innerWidth;
var innerHeight = canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

var radius=30;
//var rotation = Math.PI/180;

img = new Image();
var randomNumber = getRandomInt(2);
var imgArray = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg"];
img.src = imgArray[randomNumber];


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}


var mouse = {
  x: undefined,
  y: undefined
}

window.addEventListener('mousemove',
function(event) {
mouse.x = event.x;
mouse.y = event.y;
})

function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;
  this.rotation = Math.PI*Math.random();

  this.draw = function() {
    c.save();
    c.translate(this.x,this.y);
    c.rotate(this.rotation);
    c.beginPath();
    c.arc(0,0,this.radius,0,2*Math.PI);
    c.clip();
    c.drawImage(img, -this.radius, -this.radius, this.radius*2, this.radius*2);
   
    c.restore();
  }

  this.update = function() {

    if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
      this.dx = -this.dx;
    }

    if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
      this.dy = -this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;

    //interactivity
      if (mouse.x - this.x < 100 && mouse.x - this.x > -100
          && mouse.y - this.y < 100 && mouse.y - this.y > -100
      ) {
        this.dx = -dx * 2;
        this.dy = -dy * 2;
    }
    this.draw();
  }

}


var circleArray = [];

for (var i = 0; i < 100; i++) {
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius * 2) + radius;
  var dx = (Math.random() - 0.5) * 1;
  var dy = (Math.random() - 0.5) * 1;
 


  circleArray.push(new Circle(x, y, dx, dy, radius));


}



  function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (var i = 0; i < circleArray.length; i++){
      circleArray[i].update();
    }

    
  }

  animate();

<div id="container">
<canvas></canvas>
</div>

Thanks so much for your thorough response, love the puppos! One thing: the rotation is static, not animated. How would I animate it? — pfbarnet, Nov 05 '18 at 17:16
In `this.update` you may add `this.rotation += .01` (for example) — enxaneta, Nov 05 '18 at 19:13
Thanks again @enxaneta, brilliant and simple. I'm such a noob to javascript this stuff might seem obvious to you but not to the uninitiated. Since you've been so helpful, I'd like to pose one more question for you: right now the Circle array spawns a number of puppies of the same type. Is there a simple way to get a single array to spawn a random mixture of both types? — pfbarnet, Nov 06 '18 at 15:56
In your `Circle` function add `this.img = new Image(); this.img.src = imgArray[getRandomInt(2)];` and then when you draw the image in `this.draw` function change `c.drawImage(img . . . .,` to `c.drawImage(this.img,. . . .` — enxaneta, Nov 06 '18 at 16:05
I was very close to getting this solution on my own so maybe I'm actually learning something! Unfortunately, it's drawing a blank canvas. However, there are no errors thrown so I'm not sure what the problem is... — pfbarnet, Nov 07 '18 at 13:24

Rotating Objects in HTML5 Canvas

1 Answers1