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 data

There 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.

dowe
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:96

IMAGE 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.