https://github.com/component/style

Style canvas renders using CSS
https://github.com/component/style

Last synced: 13 days ago
JSON representation

Style canvas renders using CSS

• Host: GitHub
• URL: https://github.com/component/style
• Owner: component
• Created: 2012-08-12T03:22:32.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2013-10-09T23:39:11.000Z (about 11 years ago)
• Last Synced: 2024-05-08T17:06:54.937Z (8 months ago)
• Language: JavaScript
• Size: 127 KB
• Stars: 12
• Watchers: 12
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# Style

  Style Canvas renders using CSS.

## Installation

```

$ component install component/style

```

## Example

```css

body {

  font-size: 18px;

}

.progress {

  background: #fff;

}

.progress .percentage {

  color: #ddd;

}

```

```js

style('.progress', 'background-color');

// => 'rgb(255, 255, 255)'

style('.progress .percentage', 'color');

// => 'rgb(221, 221, 221)'

style('.progress .percent', 'font-size');

// => '18px'

```

## About

  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](http://tjholowaychuk.com/post/6339741902/styling-canvas-drawings-with-css).

## Performance

  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.

## License

  MIT