I've been playing with a Javascript program which is composed of an HTML5 Canvas that can be panned and zoomed. Text can also be added and a bounding box is initially generated for it. I've got the program to account for the panning transformations, but I'm unable to get the bounding box to account for the scaling/zooming in and out. The initial bounding box is also not perfect, although it works when you try to click and drag the text, it is off by quite a bit.

Please help me figure out how to fix these issues.

Here is the program: https://jsfiddle.net/HappyAcorn77/hekagmb2/2/

/* I use this code to account for panning transformations for the bounding box on line   
   362 

   The Zooming/Scaling function can be found on line 372 which is what I am unable to 
   adjust the bounding box for.

*/

• Click and hold to drag the text
• Left click to default to inital display transformation values