# Component

Abstract class for visual component of a scene.


## Examples

```js
import { Component } from "pencil.js";

class FunnyShape extends Component {
    /**
     * @override Component.prototype.render
     */
    render (ctx) {
        // Do crazy stuff here
    }
}
```

## ComponentOptions
Inherit from [ContainerOptions](../container/readme.md#containeroptions).

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|fill |[Color](../color/readme.md) or `String` |`"#000"` |Background Color used to fill, set to null for transparent |
|stroke |[Color](../color/readme.md) or `String` |`null` |Color used to stroke, set to null for transparent |
|strokeWidth |`Number` |`2` |Stroke line thickness in pixels |
|cursor |`String` |`Component.cursors.default` |Cursor to use when hover |
|join |`String` |`Component.joins.miter` |How lines join between them |
|origin |[`Position`](../position) |`new Position()` |Relative offset |
|shadow |[`ShadowOptions`](#shadowoptions) |(see below) |Set of options to set a shadow |

## ShadowOptions

| Name | Type | Default | Comment |
| ---- | ---- | ------- | ------- |
|blur |`Number` |`0` |Spread of the shadow around the component |
|position |[`Position`](../position) |`new Position()` |Position of the shadow relative to the component |
|color |[Color](../color/readme.md) or `String` |`null` |Color of the shadow |

