Sign in to follow this  
mychii

HTML5 Canvas transformation issue using 2D rendering context (JavaScript)

Recommended Posts

Hi,

 

I have a problem with a camera implementation in HTML5 Canvas using 2D rendering context. Since the problem is quite long and I've put it on StackOverflow, so here's the link to the question:

http://stackoverflow.com/questions/15451089/html5-canvas-transformation-issue-using-2d-rendering-context

 

It includes sample snippet code and live example to check around the issue (see desktop browser compatibility on the link).

 

I've asked this on StackOverflow but nobody seems to get the answer yet. I believe the issue is more into graphics programming theory related to transformation, specifically to rotation angles. One answer has also already confirmed me that it is more into graphics programming, therefore I believe this might be the right place to ask.

 

Note: I really suggest to do the example/make a replica of the live example to really get into the problem I'm facing because those who answered on StackOverflow also got misunderstood often that I have to keep validating the question. Please let me know if there's anything I can help for the question as well.

 

Many, many thanks!

Edited by mychii

Share this post


Link to post
Share on other sites

What you're trying to do is move the camera, right? If so, you have the translation and rotation inverted (swap them). Also you need to translate the other way, i.e. -worldPos.x and -worldPos.y.

 

Didn't really pay much attention, if I misunderstood what you want feel free to correct me.

 

EDIT: also remember that if you move the camera around you'll need to make sure they go along the camera angle (i.e. worldPos.x and worldPos.y, that's beyond the rendering part).

Edited by Sik_the_hedgehog

Share this post


Link to post
Share on other sites

Thank you for your reply Sik_the_hedgehog. The problem is, this HTML5 Canvas with 2D rendering context don't really have that kind camera. Its a parallax trick unlike in OpenGL/DirectX. So instead of moving the camera, I have to move the world instead with the center of the canvas as its center for rotation.

 

I really suggest to do the example/make a replica of the live example to really get into the problem I'm facing because those who answered on StackOverflow also got misunderstood often that I have to keep validating the question.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this