I’ve seen experienced devs crash and burn on the differences between working with the HTML5 canvas element and the HTML DOM. Here’s some short-cut learnings to help you refactor your brain the canvas way and keep you moving...
Users expect graphics apps to have a background - this gives them a sense of the shapes relationships and scale. This ingenious solution was proposed by @Kristofer[Borgware] and uses fillPatternImage to make an infinite background.
You can get the pixels color values from any part of your canvas. What you get is an array that doesn't have any obvious correlation to the width and height of the area you requested. What gives and how can you iterate through what you got?
A common use-case has rulers along the edges of the view to help users position shapes accurately. But how can we set the size of these rulers with unknown stage size? Here is a solution for optimised infinite rulers.