Your first app

Your first basic application

Let’s see the simplest app you can write, the Hello world! case in a browser.

You will need to import at least the StaticCanvas and the FabricText classes.

import { StaticCanvas, FabricText } from 'fabric'

Then instantiate both of them and combine them

const canvas = new StaticCanvas();
const helloWorld = new FabricText('Hello world!');
canvas.add(helloWorld);
canvas.centerObject(helloWorld);

Then you want to download your PNG file with it

const imageSrc = canvas.toDataURL();
// some download code down here
const a = document.createElement('a');
a.href = imageSrc;
a.download = 'image.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Now try it:

runMe