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

Started by
3 comments, last by mychii 11 years ago

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!

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).

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.

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.

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.

@Sik

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

This topic is closed to new replies.

Advertisement