Basically I want to move an object from point A ( 10x,10y ) to a position on the canvas where the mouse has been clicked ( 255x,34y ).
I'm currently using a method, but it goes from ++X then ++Y to coordinates; up then right.
I want it to go straight to position, likes an animation on a path. Slowing going from point A to Point B.
Basically I want to move an object from point A ( 10x,10y ) to a position on the canvas where the mouse has been clicked ( 255x,34y ).
I'm currently using a method, but it goes from ++X then ++Y to coordinates; up then right.
I want it to go straight to position, likes an animation on a path. Slowing going from point A to Point B.
Share Improve this question edited May 26, 2013 at 4:10 Brian asked May 26, 2013 at 3:33 BrianBrian 1511 gold badge3 silver badges14 bronze badges1 Answer
Reset to default 15When you “move” an object, what you really need to do is erase the object and redraw it
First code a function that will redraw the rect at a specified x,y
function draw(x,y){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.fillStyle="skyblue";
ctx.strokeStyle="gray";
ctx.rect(x,y,30,20);
ctx.fill();
ctx.stroke();
}
Then handle mousedown events and call the draw function
This example uses jquery for cross-browser compatibility, but you can always recode using native javascript.
// listen for all mousedown events on the canvas
$("#canvas").mousedown(function(e){handleMouseDown(e);});
// handle the mousedown event
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$("#downlog").html("Down: "+ mouseX + " / " + mouseY);
// Put your mousedown stuff here
draw(mouseX,mouseY);
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/GHSG4/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
function draw(x,y){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.fillStyle="skyblue";
ctx.strokeStyle="gray";
ctx.rect(x,y,30,20);
ctx.fill();
ctx.stroke();
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$("#downlog").html("Down: "+ mouseX + " / " + mouseY);
// Put your mousedown stuff here
draw(mouseX,mouseY);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
// start the rect at [10,10]
draw(10,10);
}); // end $(function(){});
</script>
</head>
<body>
<p>Click to redraw the rect at the mouse position</p>
<p id="downlog">Down</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>