Jump to content
  • Advertisement
Sign in to follow this  
alectora

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

This topic is 1910 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.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!