fcanvasImage Shape
TIP
This component also supports a return function
To create an image with fcanvas, we can instantiate a Image object with image property.
For image property you can use:
image An element to draw into the context. The specification permits any canvas image source, specifically,
- an HTMLImageElement,
- an SVGImageElement,
- an HTMLVideoElement,
- an HTMLCanvasElement,
- an ImageBitmap,
- an OffscreenCanvas,
- an VideoFrame,
- or
stringis url image loaded. Thisurlmust have been loaded byawait loadImage('<url>')before. refer to loadImage
In addition, this shape also provides a few other parameters:
Require Options
| Name | Type | Description |
|---|---|---|
| image | MayBeRef<CanvasImageSource | string> | multiply by a value as stated above |
Inherit Shape
| Name | Type | Description |
|---|---|---|
| x | MayBeRef<number> | offset x |
| y | MayBeRef<number> | offset y |
Optional Options
| Name | Type | Default | Description |
|---|---|---|---|
| crop | MayBeRef<{ x: number; y: number; width: number; height: number }> | undefined | An object that specifies the x, y coordinates to start cropping and the width, height dimensions of the image to be crop. |
| width | MayBeRef<number> | width of image or crop.width if available | Final width to display photo |
| height | MayBeRef<number> | height of image or crop.height if available | Final height to display photo |
TIP
The crop feature provided by this component is very simple. If you need more powerful cropping (e.g. Tile) use cropImage
Demo
ts
import { Stage, Layer, Image, loadImage } from "fcanvas"
const stage = new Stage().mount("#app")
const layer = new Layer().addTo(stage)
const image = new Image({
x: 0,
y: 0,
width: 150,
height: 150,
image: await loadImage("https://shin.is-a.dev/favicon.ico")
}).addTo(layer)