1.3.2 • Published 5 years ago
fizzle.js v1.3.2
Fizzle.js
Write any text in a canvas with fizzly bubbles.
Installation
npm install fizzle.js
Usage
Once installed, add it to your project with common.js or ES6 syntax :
const Fizzle = require("fizzle.js");
// or
import Fizzle from "fizzle.js";
Then, you can start to use it on your code :
const text = "Hello world";
const options = {
font: "monospace",
fontSize: 42,
colors: ["red", "green", "blue"]
};
// Instantiate a new Fizzle
let myFyzzle = new Fizzle(text, options);
const ctx = myCanvas.getContext("2d");
// Function run each frame
function loop () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.save();
ctx.translate(x, y); // move to desired location
myFyzzle.render(ctx); // draw it
ctx.restore();
}
Since today's web browser don't support module requirements yet, you need to use a bundler like webpack or browserify.
CDN
Ok, I got you. If you want to go old-school, just load the script with unpkg or jsdelivr.
<script src="https://unpkg.com/fizzle.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/fizzle.js"></script>
Documentation
Go see the full documentation or some examples.