Rework the canvas infrastructure.

[pensivepixel]

• Create new object for the on-screen Canvas for final rendering
• Convert Level object to OffscreenCanvases that hold the entire level size
  • add Level Width and Height to Level-X.JSON

[pensivepixel]

• Create new object for the on-screen Canvas for final rendering

Not sure if it's a good idea to maintain separate OSCs just to squish them all down to one on-screen Canvas. The idea behind having separate layers is so we don't have to redraw the whole thing every frame.

[pensivepixel]

Better solution could be to:

• Render the full level's static content to an OSC for easy cropped reuse in a paired onscreen Canvas. This is basically a new asset.
  • side note: would it just be better to render the static content as its own asset and simply load it in once without having to build it sprite-by-sprite? It's not moving, anyway. We're just making the client build from scratch an image file we could easily serve. It's just a static backdrop.
• Draw the character directly to the onscreen canvas in cropped position. Simply compute where it would appear and draw it once. This way we don't have to draw the same pixels a second time in an offscreen canvas if all we're doing is cropping, an operation that could easily just be computed.

[pensivepixel]

Under this better solution, we need to add a stage for repaint boolean value for each layer. Even animation layer needs this because we will want to control the speed of the animation over time, which means we won't necessarily be repainting the animation canvases every single frame.

[pensivepixel]

Need to rename the "foreground" and "background" layers to "staticSprites" and "dynamicSprites."