The screenshots below show the graph object with different amounts of text rotation on the y-axis labels and the buffer spaces (shown as green bars) that indicate how the spacing of elements is to be determined from the outside edge in towards the graph area itself. All that remains to do now is actually implement the part where the location of the axes is calculated automatically (with errors if the size of the entire canvas is too small) from each edge and to reflect the code for the y-axis to apply also to the x-axis.
I had been working on all of this for a little while when I realized I was making the selection of the rotation point for the axis text way too complicated. That was followed by some very relaxing pruning and simplification. I think I got the solution fairly well generalized, but the slight offsets around text objects mean that getting things tuned just the way you want is a bit of a black art, though perhaps there is a slightly different way to approach the problem that I haven’t thought of yet.
I’ve also added the ability to draw major and minor grid lines on the graphing area and separated that functionality from the drawing of the tick marks, which can now be drawn inside the axis, outside the axis, inside and outside the axis, or not at all. The colors and fonts (at least the font sizes) can be set independently for all elements.
One interesting thing I noticed was that when rotating the y-axis label 90 degrees and then drawing the buffer bars on either side of it, is that there is actually a one-pixel shift in the text. Either the first half or second half of the text was higher (or farther left or right) by one pixel halfway through. I tried different angles of rotation but couldn’t find one that would not produce this artifact (at least in Firefox). I tried more and more subtle tweaks to the numbers and ended up with a rotation angle of Math.PI * 0.499999453 (give or take a 9) that seemed to be the critical point. I searched for a while (top 30 or so Google results) to see if anyone else has noticed this but haven’t found any mentions. I understand how such an artifact can creep into the canvas functionality but the perfectionist in me can’t help but be moderately annoyed. If anyone else has seen this, especially if they know what to do about it, please leave a comment here.
