CODEWITHSUNDEEP
javascriptcsspositionhtml5-canvas
Carlo
Carlo

Reputation: 4148

How to create a responsive canvas with absolute coordinates?

I'm using the Scrollpath plugin to build a weird navigation in a website. It basically lets you draw a path using a canvas element and the scroll movement follows the path.

I would like to make it responsive, now, but I have really no idea where to start from.

To define the path you use directive in the form of lineTo(200, 1000), which draws a line from the current or previous position to the one defined in the parameters.

The problem, I think, is that a point can be outside of the current viewport. So, how can I calculate its correct new position once I shrink the window?

Upvotes: 1

Views: 872

Answers (1)

markE
markE

Reputation: 105015

Research the context.scale transformation method on the canvas.

The beauty of context.scale is that it allows you to expand/shrink the canvas without requiring you to change the original path coordinates.

Since the Scrollpath plugin displays its content with a canvas you should be able to hack some responsiveness into the plugin using .scale.

Here are some links to get you started:

https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/Translation,Rotation,andScaling/Translation,Rotation,andScaling.html

http://www.sitepoint.com/modernize-your-html5-canvas-game/

Upvotes: 1

Related Questions