Image & Canvas
canvasCompositeImage
$canvasCompositeImage
Overlays an external image at the given position with optional shape masking and blend modes
Syntax
$canvasCompositeImage[url;x;y;width;height;shape?;blend?;container?]
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| url | string | check_circle Required | — | Image source (same formats as canvasLoadImage) |
| x | integer | check_circle Required | — | Horizontal position |
| y | integer | check_circle Required | — | Vertical position |
| width | integer | check_circle Required | — | Resize width |
| height | integer | check_circle Required | — | Resize height |
| shape | string | Optional | — |
Shape mask applied to the overlay image before compositing
circle
round
oval
ellipse
triangle
rounded:15
roundrect:15
|
| blend | string | Optional | — |
Blend mode for compositing the overlay
multiply
screen
overlay
darken
lighten
difference
hardLight
softLight
|
| container | string | Optional | — | Container name for relative positioning |
Return Value
canvas
Modifies the existing canvas in-place. The overlay is composited at (x, y) after optional shape masking and resizing.
Unlike $canvasLoadImage, this function requires an existing canvas and always composites on top. Shape masks (circle, rounded, triangle, etc.) apply anti-aliased clipping — pixels outside the mask are fully transparent. The rounded:N and roundrect:N variants let you specify a corner radius in pixels (e.g., rounded:20). Blend modes use standard canvas compositing per the CSS spec.
Examples
Circular avatar overlay
$canvasCreate[profile;600;300;#2C2F33]
$canvasCompositeImage[$authorAvatar;50;50;128;128;circle]
$canvasDrawText[$username;200;80;28;white]
$attachImage[profile]
Image with rounded corners
$canvasCreate[card;500;400;#1a1a2e]
$canvasCompositeImage[https://example.com/photo.jpg;25;25;450;350;rounded:20]
$attachImage[card]
Screen blend for glow effect
$canvasLoadImage[https://example.com/bg.jpg]
$canvasCompositeImage[https://example.com/glow.png;0;0;800;600;;screen]
$attachImage[glow]