Drawing a hexgrid on a canvas, yet making it zoom/scrollable?

Question

I'm developing a game in JS / PHP. The game is basically a 2D plane (hexgrid) where each hex represents a location in space.

In total, I'm drawing 25 * 25 hexes on a 1000x1000 canvas. I also draw indicators in those hexes. Both the hexgrid as well as the indicators can be redrawn using a zoom variable that is altered by using the mousewheel and then redrawing all content * zoom.

This works ok up to a certain point. If you scroll in too "deep", the hexes become too big and the canvas, from its base size, cant display 25*25 hex anymore.

So now I require a "scroll" function where one for example would hold the mouse button and move it left or right to "shift" the view. Unfortunally I have no clue how to realize this, especially because I would require a "focus" variable to indicate at which position the canvas' center (width, height/2) is currently located at in context to the hexgrid.

Long story short, using a canvas element to display an object array, how would I go about adding a scroll function which redraws my canvas in context to the relative position?

For reference, my hexgrid is an object that holds an array of 625 subobjects (the hexes), which each have a row/column variable as well ALL 6 hexagon points in pixel-coordinates.