CODEWITHSUNDEEP
javascriptjqueryhtmlcanvaszooming
Rion Williams
Rion Williams

Reputation: 76547

HTML Canvas Zooming Issue

Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.

I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.

However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)

I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.

Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)

Not-Working Demo

Upvotes: 3

Views: 2408

Answers (1)

RSG
RSG

Reputation: 7123

This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.

To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.

Updated JSFiddle

Upvotes: 3

Related Questions