Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 

README.md

Canvas Grid

Canvas Grid is what you were looking for if you dont like messing with UI very much. With it you can mess around with your data matrix and let Canvas Grid handle the UI representation of it.

Demos

First Demo: random cell is red

Second Demo: cell movving in random directions

Getting Started

Include Canvas Grid and Watch.js:

	<script src="js/watch.js"></script>
	<script src="js/canvas-grid.js"></script>

Have a canvas in your html:

	<canvas id="myCanvas" width="400" height="500"></canvas>

Then you initialize your data matrix with colors:

var grid = [
	['black', 'grey', 'blue'],
	['#f00', '#0f0', '#00f'],
	['rgb(0,255,255)', 'rgb(255,0,255)', 'rgb(255,255,0)'],
];

Then wire it up:

canvasGrid("myCanvas", grid);

Now you can update your matrix, and Canvas Grid will update your canvas:

grid[0][0] = 'purple';

Contributing

Feel free to send pull requests!

About

This project was developed with love by Vicente de Alencar

About

Easy canvas handling with matrix as source

Resources

Releases

No releases published

Packages

No packages published