Jump to content

  • Log In with Google      Sign In   
  • Create Account

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


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
4 replies to this topic

#1 mychii   Members   -  Reputation: 425

Like
0Likes
Like

Posted 22 March 2013 - 12:00 AM

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, 22 March 2013 - 02:24 AM.


Sponsor:

#2 Sik_the_hedgehog   Crossbones+   -  Reputation: 1833

Like
0Likes
Like

Posted 22 March 2013 - 12:24 AM

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, 22 March 2013 - 12:28 AM.

Don't pay much attention to "the hedgehog" in my nick, it's just because "Sik" was already taken =/ By the way, Sik is pronounced like seek, not like sick.

#3 mychii   Members   -  Reputation: 425

Like
0Likes
Like

Posted 22 March 2013 - 02:22 AM

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.



#4 Sik_the_hedgehog   Crossbones+   -  Reputation: 1833

Like
0Likes
Like

Posted 26 March 2013 - 11:19 PM

2D canvas uses a matrix much like OpenGL and Direct3D. The only difference is that it can only do 2D operations, but otherwise the same logic applies.


Don't pay much attention to "the hedgehog" in my nick, it's just because "Sik" was already taken =/ By the way, Sik is pronounced like seek, not like sick.

#5 mychii   Members   -  Reputation: 425

Like
0Likes
Like

Posted 28 March 2013 - 10:40 PM

@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, 28 March 2013 - 10:48 PM.





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS