Other Utils #

fcanvas provides you with several functions to process logic and write faster

$ #

This function is an alias of computed

const y = $(() => mousePos.y * 2)

equal

const y = computed(() => mousePos.y * 2)

clamp #

Clamp a value between a minimum and maximum value.

• Type

function clamp(value: number, min: number, max: number): number

min <= value <= max

• Return constrained number

• Examples

clamp(12, 0, 100) // 12

cropImage #

This function allows an image to be cropped and rotated. Useful when you want to get an image from a Tiles

• Type

function cropImage(
  image: CanvasImageSource,
  x = 0,
  y = 0,
  width: number = image.width as number,
  height: number = image.height as number,
  rotate = 0
): OffscreenCanvas

• Return Returns an OffscreenCanvas containing the cropped image

• Examples

const result = cropImage(image, 0, 0, 10, 10, 0)

getMousePos #

Hàm này trả về vị trí chuột (hoặc touch) đã được tính toán về gốc tọa độ của element

• Type

interface MousePos {
  x: number
  y: number
  winX: number
  winY: number
  id: number
}

function getMousePos(
  event: TouchEvent | MouseEvent,
  element?: OffscreenCanvas | HTMLCanvasElement,
  uid?: string,
  limit = 1,
  useTouches = false
): MousePos[]

• Return an array containing the calculated position

• Examples

const pos = getMousePos(event, canvas)

haveIntersection #

Check to see if any collision occurs:

• Type

function aveIntersection(el1: Shape, el2: Shape): boolean

inRange #

Check if the value is within the allowable range

• Type

function inRange(value: number, start: number, stop: number): booolean

• Return Return true if within the allowable range

• Examples

inRange(0, 5, 10) // true
inRange(0, -1. 10) // false

lerp #

Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp() function is convenient for creating motion along a straight path and for drawing dotted lines.

• Type

function lerp(start: number, stop: number, amt: number): number

• Return lerped value

• Examples

lerp(10, 20, 0.5) // 15

loadFont #

Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a Promise<string>. This function is asynchronous, meaning it may not finish before the next line in your sketch is executed.

The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security.

• Type

function loadFont(
  url: string,
  fontFamily = unCamelCase(basename(url)),
  onProgress?: (this: XMLHttpRequest, event: ProgressEvent) => void,
  onAllReady?: boolean
): Promise<string>

• Return Return Promise<string> await font loaded

loadImage #

Download the image. It returns a Promise containing an object of HTMLImageElement - Type

function loadImage(url: string): Promise<HTMLImageElement>

• Return Return Promise<HTMLImageElement> image loaded

• Examples

const image = await loadImage("https://shin.is-a.dev/favicon.ico")

document.body.appendChild(image)

map #

Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).

• Type

function map(
  value: number,
  start: number,
  stop: number,
  min: number,
  max: number,
  withinBounds?: boolean
): number

• Return remapped number

• Examples

map(5, 0, 10, 100, 200) // 150

normalize #

Normalize the value. this fixes silly errors like 0.1 + 0.2 > 0.3

• Type

function normalize(n: number, min: number, max: number): number

• Return Return valuer normalized

• Examples

normalize(50, 0, 100) // 50
normalize(125, 0, 100) //25
normalize(-25, 0, 100) // 75

random #

Return a random floating-point number.

Takes either 0, 1 or 2 arguments.

If no argument is given, returns a random number from 0 up to (but not including) 1.

If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.

If one argument is given and it is an array, returns a random element from that array.

If two arguments are given, returns a random number from the first argument up to (but not including) the second argument.

• Type

function random(value: number): number
function random<T>(array: ArrayLike<T>): T
function random(start: number, stop: number): number

• Return Return value randomized

• Examples

random(100) // 0 <= x <= 100
random(["a", "b", "c"]) // x in "a" or "b" or "c"
random(50, 100) // 50 <= x <= 100

randomColor #

Returns a random hexadecimal color code from 0x00000 to 0xffffff

• Type

function randomColor(): string

• Return Color random format hexa

• Examples

randomColor() // Return color. Example #f00a23

range #

Create a Range of values

• Type

function range(stop: number): Range
function range(start: number, stop: number, step?: number): Range

• Return Return Range

• Examples

Array.from(range(1, 10)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

sleep #

Return a wait promise

• Type

function sleep(ms: number): Promise<void>

• Return Return Promise<void>

• Examples

console.log("wait 1s...")
await sleep(1000)
console.log("hello world")

toCanvas #

output a canvas

• Type

interface OptionsToCanvas {
  x?: number
  y?: number
  width?: number
  height?: number
  pixelRatio?: number
}
function toCanvas(
  fElement: Layer | Shape | Group | Stage,
  config?: OptionsToCanvas
): HTMLCanvasElement

• Return Return HTMLCanvasElement

• Examples

const layer = new Layer({
  width: 300,
  height: 150
})
new Rect({
  x: 0,
  y: 0,
  width: 40,
  height: 40,
  fill: "red"
}).addTo(layer)

layer.draw()

console.log(toCanvas(layer).toDataURL())

toReactive #

Converts ref to reactive. Also made possible to create a "swapable" reactive object.

• Type

function toReactive<T extends object>(objectRef: T | Ref<T>): T

• Examples

const refState = ref({ foo: "bar" })

console.log(refState.value.foo) // => 'bar'

const state = toReactive(refState) // <--

console.log(state.foo) // => 'bar'

refState.value = { bar: "foo" }

console.log(state.foo) // => undefined
console.log(state.bar) // => 'foo'