Style canvas renders using CSS
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit b43ce60 Oct 9, 2013 @jonathanong jonathanong Merge pull request #2 from repoify/add/repository
Add repository field to readme
Failed to load latest commit information.
test add tests Aug 12, 2012
.gitignore add tests Aug 12, 2012
.npmignore Initial commit Aug 12, 2012 Initial commit Aug 12, 2012
Makefile Initial commit Aug 12, 2012 docs Aug 12, 2012
component.json Initial commit Aug 12, 2012
index.js Initial commit Aug 12, 2012
npm-debug.log rename Sep 20, 2012
package.json add repository field to readme Aug 21, 2013


Style Canvas renders using CSS.


$ component install component/style


body {
  font-size: 18px;
.progress {
  background: #fff;
.progress .percentage {
  color: #ddd;
style('.progress', 'background-color');
// => 'rgb(255, 255, 255)'

style('.progress .percentage', 'color');
// => 'rgb(221, 221, 221)'

style('.progress .percent', 'font-size');
// => '18px'


This component exists so that you can influence aspects of your Canvas renders using CSS, where style decisions belong. For details view this blog post.


Generating and computing styles for ~2000 unique selectors in chrome takes ~300ms, so be careful if you plan on using this for many unique selectors. Values are otherwise cached in an object and can easily operate above 300,000 ops/s.