HTML5 Canvas, responsive.

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 🧘‍♂️🧘

Demo

- Simple animation (fit / xMidYMid meet)
- Simple animation (fill / xMidYMid slice)

Installation

$3

``bash


npm

npm i vb-canvas

Yarn

yarn add 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
















`

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 element in the DOM |
| viewBox | Array | [0, 0, 200, 200] | Canvas viewbox (x, y, w, h). Mirrors SVG Behaviour. |
| autoAspectRatio | Boolean | true | Match DOM dimensions to viewBox. When true, elements behave in a similar way to . |
| scaleMode | String | fit | VBCanvas's version of preserveAspectRatio. Accepts fit or fill. fit is equal to SVG'sxMidYMid meet. fill is equal to SVG'sxMidYMid slice. |
| resolution | Number | window.devicePixelRatio | Pixel density of the |
| static | Boolean | false` | Retains canvas drawing on resize, without the need of an animation loop. |

PRs always welcome!

This library is still in development, so you may find some small bugs. If you do, please open an issue or PR!