How to implement “zoom” on the canvas, for example, from a year to a specific day of the week?

Question

JavaScript

Hello again!
I'm doing something like a timeline / calendar grid

here in columns - the days for each month
in these days should be broken down by hours and minutes.
You need to make a "zoom" i.e. so that the columns become larger and you can see hours in them, then minutes in hours.
Before that, I just did a complete redrawing of the canvas for the current day, displaying a breakdown of time without neighboring days.
The customer now doesn’t want this at all, but wants to have a “zoom”

so that without switching immediately to per-minute he could see the hours when the minutes are not important, and when they are important, still zoom and scroll right in such a zoom to other days.
How to approach this correctly and from which side to approach?

Answer 1

I think for this it’s better to look at svg
d3js - the framework is quite complicated, but they have a million examples and ready-made blanks + docks, you can also do it with beautiful animation.

Answer 2

And what is there to think. Well, enter some kind of zoom symbol, for example, 1 is the minimum increase, as it is now. Also enter a point - the center of the viewport where the user is looking. Depending on the scale value, draw days/hours or minutes. Draw only what is visible through the viewport. Thus, you will get a long, long calendar, at each moment in time you will see only a fragment of it. Well how tile maps are done.

Answer 3

Maybe do it on regular html, according to the principle from the previous answer? In order not to make it heavier, with insufficient zoom, hide smaller elements using display:none, and show only within the viewport.