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.
MIT