HTML5 canvas, make image rotate around click to select and drag circle

Question

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 a circle. In order to move the image the user just needs to click the image and then move the mouse. To release the image the user simply needs to click where the image goes on the canvas.

Here is a fiddle showing what the current code does. http://jsfiddle.net/smacnabb/68awv7sq/9/

Question: I am looking to be able to have the images that move around the circumference of the circle rotate while moving around the circumference of the circle.
This is what I mean:

Here is a fiddle for the code I added to try and make this happen http://jsfiddle.net/smacnabb/68awv7sq/11/

in the handlemousemove method, it calls state.draw() every time the mouse move i'm passing mouseX, mouseY to state.draw.

state.draw() is in addstate method and this was the code I added to make the image rotate

var dx = mouseX - centerX;
var dy = mouseY - centerY;
var radianAngle = Math.atan2(dy, dx);
context.save();
context.translate(centerX, centerY);
context.rotate(radianAngle);
if (this.dragging) {
        context.strokeStyle = 'black';
        context.strokeRect(this.x, this.y, this.width + 2, this.height + 2)
}  
context.drawImage(this.image, this.x, this.y);
context.restore();

What am I doing wrong?

Answer 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 >= tx && x <= tx + t.width && y >= ty && y <= ty + 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>