[RESOLVED] HTML5 Canvas Mouse Over Object

[Slyke]

For a university assignment I have to create a simple interactive game.

I'm using HTML5 and the Canvas element.

In my game I've written the code for simple textboxes and buttons using Javascript (Basically keeping an array of all objects drawn to screen and when mousemove/mouseclick check mouse coords against all objects in that list).

So far it's working fine.

My problem is that I have no idea how to do this for rotations on objects. For example, I have a model of the solar system drawn to screen with planets rotating around the sun. I'm not sure how to get the coords of the planets to put them into the array that the canvas checks the mouse coords against. I basically want to be able to click on a planet when it's rotating around the sun and have it display data about said planet.

Here's a section of the planet drawing code.

    objCanvasContext.save();
    objCanvasContext.translate(xPos+ 150, yPos + 150); //Set offset for sun position.
    
    var time = new Date();
    var tmpObj
    // Mercury
    objCanvasContext.save();
    tmpObj=objScreen.celestrialObjects.mercury;
    objCanvasContext.rotate( ((2*Math.PI)/tmpObj.orbitTime)*time.getSeconds() + ((2*Math.PI)/(tmpObj.orbitTime*1000))*time.getMilliseconds() ); //Orbit
    objCanvasContext.translate(tmpObj.distance, 0); //Distance from sun
    objCanvasContext.drawImage(tmpObj.image, -12, -12); //Draw image
    objCanvasContext.restore(); 

I need to be able to get the coordinates of the image as it's drawn to screen.

I've been doing some googling around and have found the context.currentTransform property, but it doesn't seem to work (Javascript complains that it's 'undefined').

[Slyke]

Solved it.

    var rotAngle;
    // Mercury
    objCanvasContext.save();
    tmpObj=objScreen.celestrialObjects.mercury;
    rotAngle=(((2*Math.PI)/tmpObj.orbitTime)*time.getSeconds() + ((2*Math.PI)/(tmpObj.orbitTime*1000))*time.getMilliseconds());
    objCanvasContext.rotate(rotAngle);
    objCanvasContext.translate(tmpObj.distance, 0);
    objCanvasContext.drawImage(tmpObj.image, -12, -12);
    tmpObj.xPos=((xPos+150) + tmpObj.distance * Math.cos(rotAngle));
    tmpObj.yPos=((yPos+150) + tmpObj.distance * Math.sin(rotAngle));
    objCanvasContext.restore();