Canvas paint order (reference)

This page describes CanvasCreator.createCanvas so you can predict what covers what.

#Steps

1. Validate CanvasConfig (sizes, selectors, bgLayers, primary-background mutex).
2. If videoBg is active, extract the selected frame once.
3. If customBg.inherit or videoBg.inherit is true, adopt the decoded still-image dimensions.
4. Defaults: width / height fall back to 500 if still unset.
5. shadow paints first, outside the background clip, so offsets can extend beyond the background while the background itself remains above the shadow.
6. Context: canvas opacity, rotation, buildPath + clip, internal zoom, translate, blendMode.
7. Primary background:
   • videoBg → extracted still → shared image-background pipeline (inherit / fit / align / filters / opacity)
   • else customBg → the same shared image-background pipeline
   • else gradientBg → drawBackgroundGradient
   • else colorBg defined → drawBackgroundColor
   • else transparentBase → skip fill
   • else → drawBackgroundColor with #000
8. bgLayers → drawBackgroundLayers in order.
9. patternBg → EnhancedPatternRenderer.renderPattern
10. noiseBg → applyNoise
11. Restore the clipped background group.
12. stroke paints around the final canvas shape.
13. toBuffer('image/png')

#Design takeaway

Later background steps paint on top: noiseBg beats patternBg beats bgLayers beats the primary fill. The canvas shadow is an underlay painted before the background; the stroke is the final edge treatment.