HTML5 Canvas, Make Image Rotate Around Click To Select And Drag Circle

I have completed code that has a user click a button (to the right of the canvas), then the image is added to the canvas and is constrained to only move around the circumference of

Solution 1:

You are close...Take a look at this example:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var radianAngle = 0;
var cx = 225;
var cy = 125;
var radius = 50;

// image loader
var imageURLs = [];
var imagesOK = 0;
var imgs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane1.png");
loadAllImages(start);

function loadAllImages(callback) {
  for (var i = 0; i < imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function() {
      imagesOK++;
      if (imagesOK >= imageURLs.length) {
        callback();
      }
    };
    img.onerror = function() {
      alert("image load failed");
    }
    img.crossOrigin = "anonymous";
    img.src = imageURLs[i];
  }
}

var imagesY = 20;
var targets = [];
var selectedTarget = -1;

function start() {
  var n = imgs.length / 2;
  for (var i = 0; i < n; i++) {
    var target = imgs[i + n];
    ctx.drawImage(target, 15, imagesY);
    targets.push({
      x: 15,
      y: imagesY,
      width: target.width,
      height: target.height,
      image: imgs[i]
    });
    imagesY += target.height + 10;
  }
}


function handleMouseDown(e) {
  e.preventDefault();
  x = parseInt(e.clientX - offsetX);
  y = parseInt(e.clientY - offsetY);
  for (var i = 0; i < targets.length; i++) {
    var t = targets[i];
    if (x >= t.x && x <= t.x + t.width && y >= t.y && y <= t.y + t.height) {
      selectedTarget = i;
      draw(x, y);
    }
  }
}

function handleMouseMove(e) {
  if (selectedTarget < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  draw(mouseX, mouseY);
}


function draw(mouseX, mouseY) {
  var dx = mouseX - cx;
  var dy = mouseY - cy;
  var radianAngle = Math.atan2(dy, dx);
  // Drawing code goes here
  var img = targets[selectedTarget].image;
  ctx.clearRect(100, 0, canvas.width, canvas.height);
  // draw the circle
  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.stroke();
  // draw the image rotated around the circumference
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(radianAngle);
  ctx.drawImage(img, radius - img.width / 2, -img.height / 2);
  ctx.restore();
}

$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select an icon on left by clicking<br>
  Then move mouse to have icon rotate around circle</h4>
<canvas id="canvas" width=350 height=350></canvas>