I found a tutorial and have been playing with it to try and create using jscript the same illusion that I used to do in Flash.
With being able to pinpoint the mouse position x and y of the mouse on a canvas, what i would like to do is have an image move in the opposite direction.
So when the mouse moves to the left, the image moves to the right exposing more of its content on the left.
This is what i got so far:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
</script>
</body>
</html>
I should have copied the url in for it, as you can see what im trying to do then.
http://www.accend4web.co.uk/html5-Canvas.html
I’ve got an image to appear in the canvas too which is another step, but when you move the mouse into the canvas th eimage dissapears, so its still early days, but if anyone can help be great.
Updated code below:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas{
border:#666 dotted 1px;
margin-top:150px;
margin-left:150px;
}
</style>
</head>
<body>
<img id="cat" src="chris-Header.jpg" alt="sleeping cat" width="700" height="500">
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var cat = document.getElementById("cat");
context.drawImage(cat, 0, 0);
};
</script>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
</script>
</body>
</html>
I understand why it was cleaning the canavs now it was to update the x and y coordinates, so I have shifted the printing of the coordinates to a second canvas so i can make sure its working, and have an image in the canvas area.
So what I need to do is try and move that image the opposite direction to the mouse.
Hi there,
Wouldn’t it be better to implement this functionality by making the image draggable on the canvas?
That way it could also be made to work on touch devices.
Otherwise, could you link to the tutorial you have been following?
Hi Pullo,
What I need to create is a feature for a website where the background image is various rooms/sections of a hotel.
On that background image are hotspots and when you click them you get information, so the idea is to create a scene as though looking through the eyes of the person looking at the room.
The panning of the room the opposite way to the mouse movement is to create the illusion of looking and turning your head.
Like this:
You will have to drill to the living room to get the idea.
I think if the room could move by on a pc clicking the mouse and moving it, and on a touch screen holding your finger on the screen and moving.
The tutorial is pretty much whats up there really, appart form the extra bit im trying to work out with the background image moving, and then creating hotspots.
Ah ok, that makes sense.
Do you have a link to the tutorial you are following?
I’m afraid programming something like this from scratch could be quite a sizeable task.
I would probably look for a plugin that did what I wanted (or near enough).
This, for example: http://www.openstudio.fr/jquery.panorama/
Thats great, thank you Pullo.
I will have a go with that then, and see if I can make it work for what we need.
Thanks for the time.
No problems 
If that doesn’t do / can’t be made to do what you want, you can also have a look here for some more inspiration: