CODEWITHSUNDEEP
javascriptjqueryhtmlrotationhtml5-canvas
Arno Vosman
Arno Vosman

Reputation: 3

Rotate image with mouse in an html5 canvas

I'm having some trouble turning an image with my mouse by using html5. I have a background image, and a foreground image. The images display properly, but I can't get the foreground image to rotate. 

var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetCX = canvasOffset.left;
var offsetCY = canvasOffset.top;
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var r = -2.3;

var background = new Image();
background.src = "http://i.imgur.com/dHDMocI.png";

background.onload = function drawBackground() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(background, 0, 0);

  var pijl = new Image();
  pijl.src = "http://i.imgur.com/2N70aC1.png";

  pijl.onload = function drawPijl() {
    var xOffset = pijl.width / -2;
    var yOffset = pijl.height / -2;
    ctx.save();
    ctx.translate(242, 233);
    ctx.rotate(r);
    ctx.drawImage(pijl, xOffset, yOffset);
    ctx.restore();
  }
}

function handleMouseDown(e) {
  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  drawBackground(false);
  isDown = ctx.isPointInPath(mouseX, mouseY);
  console.log(isDown);
}

function handleMouseUp(e) {
  isDown = false;
}

function handleMouseOut(e) {
  isDown = false;
}

function handleMouseMove(e) {
  if (!isDown) {
    return;
  }

  mouseX = parseInt(e.clientX - offsetCX);
  mouseY = parseInt(e.clientY - offsetCY);
  var dx = mouseX - cx;
  var dy = mouseY - cy;
  var angle = Math.atan2(dy, dx);
  r = angle;
  drawBackground();
}

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

Here's my JSfiddle: https://jsfiddle.net/rnhgqcw0/1/

I used parts of this code, which I edited for use with my picture: http://jsfiddle.net/2bgypydj/

My goal is to be able to turn the foreground image (large white arrow) around it's center, while the mouse is pressed, and be fixed when the mouse is released. I think I implemented the code I used wrong. If I change the variable "r" (angle) manually and run the code, the image does turn.

Any help would be appreciated.

Upvotes: 0

Views: 1778

Answers (1)

Hatchet
Hatchet

Reputation: 5428

Scope

Your first problems are a result of improperly scoped variables/functions. See these errors (they will appear in your console):

Uncaught ReferenceError: isDown is not defined

Uncaught ReferenceError: drawPijl is not defined

Uncaught ReferenceError: pijl is not defined

Scope these three properly.

Logic

I don't think ctx.isPointInPath means what you think it means. Being able to research is a valuable skill. See MDN.

Coding Practice

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

Can easily be condensed to:

$("#canvas").mousedown(handleMouseDown);
$("#canvas").mousemove(handleMouseMove);
$("#canvas").mouseup(handleMouseUp);
$("#canvas").mouseout(handleMouseOut);

Those are your main problems.

Happy Coding!

Here's an example fiddle that works, and demonstrates one more thing that might need to be fixed.

Upvotes: 2

Related Questions