What's the Drawing Canvas plugin?

Construct 3 object for runtime drawing with paste-object, draw-line, draw-polygon actions. Like a programmable layer. Supports effects (Additive, Multiply, etc.) for compositing pasted content.

Why does blend mode look wrong?

Two common causes: pasting onto canvas before blend mode set, or premultiplied alpha mismatch. Construct uses premultiplied alpha; additive content with non-premultiplied alpha looks too bright.

How do I fix premultiplied alpha?

Set canvas to non-premultiplied (in editor properties), or multiply RGB by A before drawing. Most cases: keep premultiplied and pre-multiply source assets.

Fix: Construct 3 Canvas Plugin Blend Mode Wrong

Quick answer: Set the canvas’s Blend Mode property before pasting content. For glow effects, ensure premultiplied alpha matches between canvas and source sprites.

A particle effect uses Drawing Canvas to accumulate glow trails. The desired Additive blend looks blown out and washed. The blend mode wasn’t applied before paste.

Set Blend Mode Before Paste

In events:

Canvas → Set Effect "Additive"
Canvas → Paste object Sprite

Order matters: blend mode must be active when paste happens. Setting it after has no effect on already-pasted content.

Premultiplied Alpha Note

Construct 3 uses premultiplied alpha. Source sprites with non-premultiplied alpha (most PNGs) get composited correctly for normal blend, but additive looks wrong — bright halos around transparent regions.

Fix: in the Sprite’s image editor, ensure RGB × A is baked in (use the “Multiply RGB by A” option), or set the source sprite’s effect to handle conversion.

Common Blend Modes

Normal: default alpha blending.
Additive: bright over bright. Glow, fire.
Multiply: darkens. Shadows, color tint.
Screen: inverse multiply. Lightens, similar to additive but softer.

Clear Canvas Between Frames

If you want the canvas to act as a per-frame accumulator (trails fading), use:

Every tick: Canvas → Clear (rgba 0, 0, 0, 0)
              Paste current particles

Or fade slightly each frame to leave trails: Clear (rgba 0, 0, 0, 0.05).

Verifying

Side-by-side: pasted on canvas vs direct sprite render. Same blend mode should look identical. Adjust premultiplied alpha if not. Preview in browser; WebGL effects path is what matters.

“Set blend before paste. Match premultiplied alpha. Two rules cover most canvas effect bugs.”

For HTML5 export, test in different browsers — WebGL precision varies and exotic blends sometimes look different cross-platform.