https://github.com/rickycodes/kaleidos

:cyclone: <canvas> kaleidoscope node module https://rickycodes.github.io/kaleidos/
https://github.com/rickycodes/kaleidos

canvas javascript kaleidos

Last synced: 10 months ago
JSON representation

:cyclone: <canvas> kaleidoscope node module https://rickycodes.github.io/kaleidos/

• Host: GitHub
• URL: https://github.com/rickycodes/kaleidos
• Owner: rickycodes
• Created: 2016-02-22T18:32:10.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2018-04-28T08:07:55.000Z (about 8 years ago)
• Last Synced: 2025-06-25T22:44:44.275Z (11 months ago)
• Topics: canvas, javascript, kaleidos
• Language: JavaScript
• Homepage:
• Size: 112 KB
• Stars: 16
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
### Kaleidos  

[![Build Status](https://api.travis-ci.org/rickycodes/kaleidos.svg?branch=master)](https://travis-ci.org/rickycodes/kaleidos/) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![npm-version](https://img.shields.io/npm/v/kaleidos.svg?style=flat)](https://www.npmjs.com/package/kaleidos)  

`` kaleidoscope node module for use with browserify, webpack, etc.

#### Usage:

##### Install:

`npm i kaleidos --save`

##### Require the module:

```js

const Kaleidos = require('kaleidos')

```

##### Instantiate with values:

```js

// create image

const image = new Image()

image.src = 'http://i.imgur.com/YaZJZac.jpg'

// create a canvas

const canvas = document.createElement('canvas')

// instantiate

const kaleidos = new Kaleidos(canvas, {

  src: image // pass above image as source

})

```

##### Append to DOM and initialize on image load:

```js

image.addEventListener('load', function () {

  document.body.appendChild(kaleidos.canvas)

  kaleidos.initialize()

})

```

##### Result:

![kaleidos](http://i.imgur.com/n4O7JXn.jpg)

*Check the `/examples`  

Try them out*

#### TODO:

~~Add tests~~  

Add _more_ tests  

Add more examples  

~~Make examples better on mobile~~  

~~Fix webcam example in Firefox~~  

~~Update src to be image _or_ video~~  

~~Cleanup~~