PROJECT ASSET
/assets/logo.svg
The example remains local to the project and does not depend on a third-party image service.
CANVAS · COMPOSITION
Image composition
Place project assets inside a retained scene, then layer portable geometry, opacity, rotation, and typography above or below them.
PROJECT ASSET
/assets/logo.svg
The example remains local to the project and does not depend on a third-party image service.
ADVANCED EXAMPLE
Create a layered artboard
The scene starts with a theme-aware background, adds translucent color, rotates a panel, fits a local asset, and finishes with centered text.
Order | Layer | Command | Purpose |
|---|---|---|---|
No dataThere are no records to display | |||
SOURCE
Fit assets inside logical coordinates
An image command accepts a project asset path or HTTPS URL. Its own fit controls the source inside the command rectangle; Canvas fit controls the complete logical scene inside the component.
signal composition value:[
{ type:"rect" x:0 y:0 width:640 height:360 fill:"background" },
{ type:"rect" x:40 y:34 width:560 height:292 radius:28 fill:"surface" rotation:-2 },
{ type:"image" src:"/assets/logo.svg" x:235 y:66 width:170 height:104 fit:"contain" },
{ type:"text" x:320 y:220 text:"PORTABLE COMPOSITION" fill:"surfaceText" size:28 align:"center" },
]
Canvas scene:composition viewWidth:640 viewHeight:360 autoplay:false label:"Layered brand composition" w:"full" h:96IMAGE RENDERING
Keep the portable boundary clear
Image fit
contain shows the complete asset, cover fills and crops, and stretch maps it to the command bounds.
Pixel sampling
Set pixelated:true on Canvas when image commands should render without smoothing.
Current limits
Arbitrary pixel filters, shaders, and video-frame processing are not supported.