Skip to content

Instantly share code, notes, and snippets.

@rlemon
Created Nov 15, 2011
Embed
What would you like to do?
Canvas move object to mouse click. With easing.. :P
window.onload = function() {
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var h, w, speed = 10;
this.onresize = function() {
h = window.innerHeight, w = window.innerWidth;
cvs.setAttribute("height", h);
cvs.setAttribute("width", w);
};
this.onresize.call();
var cx = w / 2,
cy = h / 2;
var nx = cx,
ny = cy;
this.onmouseup = function(event) {
nx = event.clientX, ny = event.clientY;
};
var draw = function() {
ctx.save();
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, w, h);
cx += (nx - cx) / speed;
cy += (ny - cy) / speed;
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(cx, cy, 10, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.restore();
setTimeout(draw, 1000 / 32);
};
draw();
};
@garlicxd

This comment has been minimized.

Copy link

@garlicxd garlicxd commented Apr 12, 2017

Which part is the easing?

@AlainBarrios

This comment has been minimized.

Copy link

@AlainBarrios AlainBarrios commented Nov 20, 2018

Which part is the easing?

cx += (nx - cx) / speed;
cy += (ny - cy) / speed;
this part

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment