Today I continued to dive into smaller and smaller details of how the tick value labels get placed when they are rotated. When it seemed like I was done I set the graph up to continually modify the angle of the labels on each axis, along with the font size of the graph label, all at different speeds. What I saw was that the anchor positioning of the text for the tick value labels flicked around more than I thought it should. One thing that confused me was that I was trying to judge single-pixel alignment of text elements that varied in shape on either end, depending on the beginning or ending numeral.
I therefore decided to temporarily pad the label text with a capital letter “M” on each end. That told me that my initial design intent was correct and that I probably didn’t need most of the adjustment factors I was adding in.
I also added a small reference rectangle at the origin point for each text element (in green, upper left pixel is actual anchor, colors to not always reset correctly if drawing context is rotated). That turned out to be really interesting because I could clearly see that a certain amount of the location “chatter” I was seeing was due to the displacements accumulated as the HTML canvas object draws each character in the string supplied to the fillText function. These errors aren’t large, but when you’re trying to nudge things down to the last pixel they do become noticeable, especially over the course of drawing a longer series of characters. I therefore decided that things are good enough as they are for the time being. If things aren’t continuously moving you’d be unlikely to notice most of the issues.
The continuous cycling of the graph’s elements shows how the spacing is determined from each outside edge of the canvas in towards the drawing area. This isn’t the kind of thing you’d normally do with a graphing widget, but it seemed to illustrate things well for this purpose.