> For the complete documentation index, see [llms.txt](https://imagineee.gitbook.io/mayo-gl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://imagineee.gitbook.io/mayo-gl/api/mayogl-class.md).

# MayoGL Class

Initialising a canvas

```
class MayoGL(canvas: DOM Element, options: JSON)
```

To create a drawing process, just Initialise the class.

## Example

```
var display = new MayoGL(document.getElementById("screen"), 
    {
        width: 800,
        height: 600,
        alpha: true,
        clearColor: '#222',
        pixelSize: 2, 
        antiAlias: true
    }
)
```

## Options

### **Canvas**

A dom canvas element on which it will draw

### **Options**

A list of options you can use to customize your rendering

<table><thead><tr><th width="153" align="center">name</th><th width="150" align="center">Type</th><th width="253" align="center">Description</th><th align="center">Default Value</th></tr></thead><tbody><tr><td align="center">width</td><td align="center">Number</td><td align="center">The width of the canvas</td><td align="center">Your canvas default width</td></tr><tr><td align="center">height</td><td align="center">Number</td><td align="center">The height of the canvas</td><td align="center">Your canvas default height</td></tr><tr><td align="center">alpha</td><td align="center">Boolean</td><td align="center">Should the canvas be transparent</td><td align="center">false</td></tr><tr><td align="center">clearColor</td><td align="center">String</td><td align="center">The background colour if you clear the screen</td><td align="center">Black (#000000)</td></tr><tr><td align="center">pixelSize</td><td align="center">Number</td><td align="center">The size of a pixel on the canvas; eg.: if 4, each pixel drawn will take up 4 pixels on the screen.</td><td align="center">1</td></tr><tr><td align="center">antiAlias</td><td align="center">Boolean</td><td align="center">Anti Aliasing, smooth picture</td><td align="center">false</td></tr></tbody></table>
