A powerful 2d canvas library that allows minimal rendering and provides diverse shapes https://fcanvas.js.org
Close the path when you're done drawing, not fill
| Name | Description |
|---|---|
| fcanvas | The main package provides classes and methods for drawing canvas and manipulating events |
| @fcanvas/animate | plugin that allows connecting gsap to fcanvas to create powerful animations |
| @fcanvas/communicate | This package allows a simple connection between MessageChannel-based channels such as WebWorker, IFrame... |
| @fcanvas/node | Plugin allow use fcanvas in NodeJS |
| @fcanvas/tile | Plugin that allows creating tiles from file |
| @fcanvas/worker | The plugin provides support for using fCanvas in WebWorker |
NPM / Yarn / Pnpm:
pnpm add fcanvasCDN:
<script src="https://unpkg.com/fcanvas"></script>import { Stage, Layer, Circle } from "fcanvas"
import { installAnimate } from "@fcanvas/animate"
installAnimate(Shape)
const stage = new Stage({
container: "app",
width: 300,
height: 300
})
const layer = new Layer()
stage.add(layer)
const circle = new Circle({
x: 0,
y: 0,
radius: 20,
fill: "red"
})
layer.add(circle)
circle.to({
x: stage.$.width,
duration: 1
})If you don't like using @fcanvas/animate you can always use gsap by:
import gsap from "gsap"
...
gsap(circle.$).to({
x: stage.$.width,
duration: 1
})