> 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/installation-and-usage.md).

# Installation & Usage

How to install and use

## Install

Its quite simple to install and use.

### Browser

simply import and use

```
//In your js code
import { MayoGL, MayoImage, Vector } from 'https://unpkg.com/mayo-gl@0.1.0/dist/MayoGL.es.js'
```

### NPM

install using your favourite package manager

```
# NPM
npm install mayo-gl
# Yarn
yarn add mayo-gl
```

and use in in your code

```
// es module
import { MayoGL, MayoImage, Vector } from 'mayo-gl'
//Common js
var { MayoGL, MayoImage, Vector } = require('mayo-gl')
```

## Usage

```
// Initilize Display
var display = new MayoGL(document.getElementById("my-canvas"), 
    {
        width: window.innerWidth,
        height: window.innerHeight,
        alpha: false,
        clearColor: '#000',
        pixelSize: 1, 
        antiAlias: true
    }
)
// Load image into cache
display.loadInCache(
    MayoImage('https://raw.githubusercontent.com/imagineeeinc/MayoGL/main/mayogl.png'),
    'logo'
)
// Draw Rectangle
display.rect(
    {
        x: display.width/2 - 10,
        y: display.height/2 - 10,
        width: 20,
        height:20,
        color: display.color(255,0,0) // Red color
    }
)
// Draw an image
display.texture(
    {
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        image: display.loadFromCache('logo')
    }
)
```