@cycjimmy/canvas-snow

Generates snow in canvas.

Usage no npm install needed!

<script type="module">
  import cycjimmyCanvasSnow from 'https://cdn.skypack.dev/@cycjimmy/canvas-snow';
</script>

README

Canvas Snow

NPM version build status David deps devDependencies Status npm download jsdelivr npm license

Generates snow in canvas. (Releases | Demo)

Install

$ npm install @cycjimmy/canvas-snow --save
# or
$ yarn add @cycjimmy/canvas-snow

Use

import CanvasSnow from '@cycjimmy/canvas-snow';
# OR
const CanvasSnow = require('@cycjimmy/canvas-snow');
const canvasSnow = new CanvasSnow({
  [...options]
}).init();
canvasSnow.start();
  • options

    • context: [Element|String] Context Wrapper Element.
    • cell: [Number] The maximum number of snow in the canvas.
    • width: [Number|String] Set canvas width with percentage and px units. Default '100%'.
    • height: [Number|String] Set canvas height with percentage and px units. Default '100%'.
  • function

    • init(): Initialize to generate random snow.
    • start(): Start snow animation.
    • stop(): Stop snow animation.
    • clear(): Clear Generated random snow.

Use in browser

<div id="snowWrapper"></div>
<script src="canvas-snow.min.js"></script>
<script>
  var canvasSnow = new CanvasSnow(source, {
    context: '#snowWrapper',
    [...options]
  }).init();

  canvasSnow.start();
</script>

CDN

To use via a CDN include this in your html:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/canvas-snow@1/build/canvas-snow.min.js"></script>