Develop Reference

How to move a canvas object with mouse if they're not at the same position?

Moving the object at the same position with the mouse is easy, what I would like to do is having a full window canvas with a circle at 500, 500. If I click anywhere, from that point any position change of my cursor would affect the circle the same way.
e.g. If I move right 50px the circle also moves right 50px while keeping the initial distance etc.
How to solve this?

If you want to change the position of the circle independent of where the mouse is, I would suggest keeping 2 variables storing the x and y coordinates of the circle, and every time the mouse moves, you can update those variables with the change in x and y components of the mouse movement. If you are trying to make the circle at the same exact position of the mouse, you can just assign the circle to position of the mouse whenever there's a mouse movement.
hope this helps

Rotating an object with a mouse

Rotation in 2D. Language: Javascript
Please tell me how to rotate the object with the mouse. I need to: click on the object with the mouse, rotate it to n degrees, release the mouse button and the object should start rotating according to where I released the mouse button.
Example implemented in 3D on Unity - Example

I'm not going to code this for you but this is the general flow of what you should get happening:
Add an event listener for mousedown().
add an event listener for mouseup().
When mousedown() occurs log the position of mouse.
when mouseup() occurs log the position of the mouse.
calculate the delta between positions.
decide how you translate that data into degrees.
use Animate to change to the rotation attribute of the element accordingly.

Animation with multiple steps with smooth speed

I want to make an animation in jQuery to move a div to another div smoothly but recalculating the coordinates of the final destination in case a user scrollsdown with his mouse for example.
The red square is absolute positioned and the blue square has a fixed position.
I had an idea of calling several times the stop() function and then animate again to the new position of the blue square but the transition isn't smooth at all.
Is there a way to set new destination from time to time but keeping it smooth?
http://codepen.io/anon/pen/gkLzh

Change the background position on drag with javascript

How do I drag the background image and change its position? Like when you change the position of your cover photo on facebook.
I've searched everywhere but can't find the right one.

On mousedown, log the current mouse position. Create a mask, and on that mask:
On mousemove, get the current mouse position and subtract it from the original mouse position. Move the background accordingly
On mouseup, remove the mask and save the new position.

You can try with this jQuery plugin, and is as easy as:
element.backgroundDraggable()
Here you have a demo

Spot the ball game, zooming problems, jQuery

I am trying to create a spot the ball game, so it will (eventually) be an image of a player kicking a ball but the ball has been removed and the player needs to click where the ball should be.
The first version went well and works.
http://enjoythespace.com/sites/game/test.html
But what I need to add is some sort of zooming so you can see more accurately where you are clicking. I been playing around and have come up with this
http://enjoythespace.com/sites/v2/demo.html
But once you click it looks great when zoomed in but when you go back to the image its way off.
I think its todo with how the image is setup, the #webpage is half the original size of the image and the #retina uses the full size of the image.
Any help?

The first problem is that you aren't setting the retina backgroundPosition correctly.
This code works (I added a zoom variable to make it clear how changing the zoom would change the calculation, but it would need other changes too):
/* Moving the retina div with the mouse
(and scrolling the background) */
zoom = 2.0;
retina.css({
left : left - sizes.retina.width/2,
top : top - sizes.retina.height/2,
backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px'
});
Test this by checking that all four corners are seen correctly in the retina, i.e. when you're over the corner of the main image, the corner should be in the center of the retina circle.
The second problem is if you resize the browser the position calculations are out because the offset variable isn't updated for the new size. A simple way to do this is to put this as the first line of webpage.mousemove() so the offsets are updated every time:
var offset = { left: webpage.offset().left, top: webpage.offset().top };

It looks like you are passing the top/left position click point of the zoomed image to highlight where you have clicked. What you will need to do is alter your top/left position based on whether the fisheye is over the image or not.
Does the un-zoomed image have to be part of the news page or can it be a standalone image?
If it can be standalone then the solution should be quite simple. If the zoomed in image is twice the size of the unzoomed one then you can just set the top/left values of the highlight to half the value of the zoomed, when looking at the unzoomed.
Jquery position will allow you to accurately get the position.
jQuery Position()