# Class: CanvasRenderer

## CanvasRenderer()

A class to render geometric figures from geometry.js on a canvas, and to handle the transformation and background image of the canvas.

## Constructor

#### new CanvasRenderer()

Source:
  - CanvasRenderer.js, line 23

### Members

#### backgroundImage

##### Properties:

Name | Type | Description
--- | --- | ---
`backgroundImage` | Object | null | The background image of the scene, null if not set.

Source:
  - CanvasRenderer.js, line 42

#### canvas

##### Properties:

Name | Type | Description
--- | --- | ---
`canvas` | Object | The canvas of the scene.

Source:
  - CanvasRenderer.js, line 39

#### ctx

##### Properties:

Name | Type | Description
--- | --- | ---
`ctx` | Object | The context of the canvas.

Source:
  - CanvasRenderer.js, line 27

#### ctxVirtual

##### Properties:

Name | Type | Description
--- | --- | ---
`ctxVirtual` | CanvasRenderingContext2D | The virtual context for color adjustment.

Source:
  - CanvasRenderer.js, line 45

#### isSVG

##### Properties:

Name | Type | Description
--- | --- | ---
`isSVG` | boolean | Whether the canvas is being exported to SVG.

Source:
  - CanvasRenderer.js, line 49

#### lengthScale

##### Properties:

Name | Type | Description
--- | --- | ---
`lengthScale` | number | The scale factor of the length units of the scene.

Source:
  - CanvasRenderer.js, line 36

#### origin

##### Properties:

Name | Type | Description
--- | --- | ---
`origin` | Object | The origin of the scene in the viewport.

Source:
  - CanvasRenderer.js, line 30

#### scale

##### Properties:

Name | Type | Description
--- | --- | ---
`scale` | number | The scale factor (the viewport physical pixel per internal length unit) of the scene.

Source:
  - CanvasRenderer.js, line 33

### Methods

#### applyColorTransformation()

Apply color transformation to simulate 'lighter' composition with less color saturation.

Source:
  - CanvasRenderer.js, line 294

#### drawCircle(c, coloropt)

Draw a circle.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`c` | Circle |  |  |
`color` | String | <optional> | 'black' |

Source:
  - CanvasRenderer.js, line 277

#### drawLine(l, coloropt)

Draw a line.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`l` | Line |  |  |
`color` | Array.<number> | <optional> | [0, 0, 0, 1] |

Source:
  - CanvasRenderer.js, line 91

#### drawPoint(p, coloropt, sizeopt)

Draw a point.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`p` | Point |  |  |
`color` | Array.<number> | <optional> | [0, 0, 0, 1] |
`size` | number | <optional> | 5 |

Source:
  - CanvasRenderer.js, line 81

#### drawRay(r, coloropt, showArrowopt, lineDashopt)

Draw a ray.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`r` | Line |  |  |
`color` | Array.<number> | <optional> | [0, 0, 0, 1] |
`showArrow` | boolean | <optional> | true |
`lineDash` | Array.<number> | <optional> | [] |

Source:
  - CanvasRenderer.js, line 109

#### drawSegment(s, coloropt, showArrowopt, arrowPositionopt)

Draw a segment.

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`s` | Line |  |  |
`color` | Array.<number> | <optional> | [0, 0, 0, 1] |
`showArrow` | boolean | <optional> | true |
`arrowPosition` | number | <optional> | 0.67 | Position of arrow along line (0 to 1, where 0 is at p1 and 1 is at p2)

Source:
  - CanvasRenderer.js, line 197

#### rgbaToCssColor(rgba) → {string}

Converts an RGBA array [R, G, B, A] with values between 0 and 1 to a CSS color string.

##### Parameters:

Name | Type | Description
--- | --- | ---
`rgba` | Array.<number> | The RGBA array.

Source:
  - CanvasRenderer.js, line 70

##### Returns:

The CSS color string.

Type
  string