Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including chronocanvas with all npm packages installed. Try it out:

var chronocanvas = require("chronocanvas")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

chronocanvas v0.0.2

Allow to display a visual Chronometer in a canvas tag, associate to its ID

ChronoCanvas

ChronoCanvas is a simple visual chronometer using canvas tag.

##How to use

  • Install it manually or with npm.
  • Create a canvas tag with equal width and height.
  • Configure chronoCanvas occurence with parameters.

How it work

Install the package:

 npm install chronoCanvas

In your javascript:

var chronoCanvas = require('chronoCanvas');

document.addEventListener('DOMContentLoaded', function(){
  chronoCanvas({
    canvasTarget: ".chronometer1"
  });
})

In your HTML:

<canvas width="150" height="150" class="chronometer1"></canvas>

Will give:

instant pie!

Examples

See parameters in action, and differents instalation mods here: http://simonertel.net/dossiers/chronoCanvas/examples/examples.html

Params

  • canvasTarget : a string. Designate DOM node.
  • portions: number. for how much part you want.
  • frequency: number. Interval between each refresh for the canvas.
  • iteration: number. How many turns you want.
  • outputEnd: a function. Will be call when terminate his cycle.
  • ahead: a string. Must receive some keywords for style the canvas, in this orders:
  • "stroke width color". Example : "stroke 10 #0f0"
  • "fill color". Example : "fill blue"
  • behind: a string. The same as previous, but for style the background.

Version

0.0.1

Tech

  • Javascript

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free