A horizontal and vertical ruler on top and left of the canvas to give an indication of where on the canvas the user has panned / zoomed to.
Potential approaches:
For now I think it's best to build this component using html and css e.g. position: absolute; left: x properties. This makes it more complicated as we would need to work out the canvas zoom/pan and apply that to the ruler range shown on the screen however, it simplifies things on the canvas side, as drawing anything on the canvas would need to be erased/redrawn when we pan/zoom/move pieces, so building this outside the canvas means we don't need to worry about that.
Otherwise another idea could be to draw this ruler on a separate canvas element, and apply the same zoom/pan properties to this ruler specific canvas, which we can erase/redraw as needed without worrying about accidentally erasing pieces. However I think this approach might make it harder to "overlay" the ruler over top of the main drawing canvas
Can be extended in the future to allow drawing at exact measurements e.g. "draw a straight line that is 30mm long" with visual confirmation from the ruler.
A horizontal and vertical ruler on top and left of the canvas to give an indication of where on the canvas the user has panned / zoomed to.
Potential approaches:
position: absolute; left: xproperties. This makes it more complicated as we would need to work out the canvas zoom/pan and apply that to the ruler range shown on the screen however, it simplifies things on the canvas side, as drawing anything on the canvas would need to be erased/redrawn when we pan/zoom/move pieces, so building this outside the canvas means we don't need to worry about that.Can be extended in the future to allow drawing at exact measurements e.g. "draw a straight line that is 30mm long" with visual confirmation from the ruler.