<img src="https://raw.githubusercontent.com/georgedoescode/VBCanvas/main/vb-og.png">
npm install vb-canvas
Getting to look great is difficult. Making responsive is even more difficult. VBCanvas is here to make it easy.
VBCanvas allows you to define a canvas viewBox attribute just like SVG. Once set, the canvas will automatically position all drawing relative to the viewBox and scale the canvas automatically. Blissful 🧘♂️🧘
- Simple animation (fit / xMidYMid meet)
- Simple animation (fill / xMidYMid slice)
``bashnpm
npm i vb-canvas
$3
`html
`Usage
The quickest way to take VBCanvas for a spin is to whip up a simple
.html file and grab the library from unpkg. Once you are all set up, you can create canvasses using VBCanvas.createCanvas.Check out the code below for a complete example.
`html
VBCanvas Demo
`For more examples, check out the demo.
$3
To use VBCanvas in a module based environment, just import the
createCanvas function from VBCanvas like so:`javascript
import { createCanvas } from 'VBCanvas';const canvasWidth = 100;
const canvasHeight = 100;
const { ctx } = createCanvas({
viewBox: [0, 0, canvasWidth, canvasHeight],
...
})
`$3
| Name | Type | Default | Description |
| ----------------- | -------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
target | String Or DOM Node | document.body | Where to add the