Pan + Enlarge HTML5 canvas grid with the first column pinned

Question

I would like to create an HTML5 canvas grid with a fixed first column (MS Excel has a similar option). So far I have managed to create the following: http://jsfiddle.net/dobbylan/AbnpE/

I added a Pan + Zoom function based on the publication of Phrogz: Enlarge Canvas to Mouse Cursor

However, I have the following difficulties with panning + zooming and a docked column:

• I would like to prevent the canvas from panning further to the right than the first column, i.e. the first column may be larger on the left border. (The same applies for the top border and pan down)
• When scaling, there is a problem with scaling the first column, which I cannot fix.

Can anyone help me with this?

Answer 1

check this script:

http://jsfiddle.net/U8BE5/1/

It should give you some ideas on how to handle your boundary conditions (also with scaling).

I'm not sure why you chose to use two canvases and don't use jQuery, this probably does more harm than good.

Corresponding code for borders:

if (gX > 0) gX = 0; if (gX < canvas.width - gW * gScale) gX = canvas.width - gW * gScale; if (gY > 0) gY = 0; if (gY < canvas.height - gH * gScale) gY = canvas.height - gH * gScale; 

Check out my general approach in the script to see if you want to switch your strategy a bit.

To be honest, I could not execute some of your codes.