Jump to content
  • Advertisement
Sign in to follow this  
mychii

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

This topic is 2006 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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
Advertisement

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

@Sik

You are right Sik, my bad. I forgot I have to create an inverse transformation in OpenGL/Direct3D as well for camera.

Edited by mychii

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!