Style canvas renders using CSS


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.