https://github.com/matronator/mgine

2D canvas rendering library.
https://github.com/matronator/mgine

2d 2d-canvas 2d-graphics 2d-library 2d-rendering canvas canvas-library canvas2d graphics graphics-library html-canvas html5 rendering rendering-engine

Last synced: 4 months ago
JSON representation

2D canvas rendering library.

• Host: GitHub
• URL: https://github.com/matronator/mgine
• Owner: matronator
• License: mit
• Created: 2025-10-04T00:10:18.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-11-06T21:13:26.000Z (7 months ago)
• Last Synced: 2025-11-06T23:23:35.191Z (7 months ago)
• Topics: 2d, 2d-canvas, 2d-graphics, 2d-library, 2d-rendering, canvas, canvas-library, canvas2d, graphics, graphics-library, html-canvas, html5, rendering, rendering-engine
• Language: TypeScript
• Homepage:
• Size: 1.07 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

          
![Ping Tracker logo](.github/logo.png)

# Mgine

![NPM Version](https://img.shields.io/npm/v/mgine) ![NPM Downloads](https://img.shields.io/npm/dw/mgine) ![npm TypeScript version](https://img.shields.io/npm/dependency-version/mgine/dev/typescript) ![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/mgine) ![Dependencies](https://badgen.net/bundlephobia/dependency-count/mgine) ![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/mgine) ![Commits](https://badgen.net/github/commits/matronator/mgine) ![Issues](https://img.shields.io/github/issues/matronator/mgine.svg) ![License](https://img.shields.io/github/license/matronator/mgine.svg) ![Follow](https://img.shields.io/github/followers/matronator.svg?style=social&label=Follow&maxAge=2592000) ![GitHub Sponsors](https://img.shields.io/github/sponsors/matronator) [![](https://data.jsdelivr.com/v1/package/npm/mgine/badge)](https://www.jsdelivr.com/package/npm/mgine)

**Mgine** (read as *em*gine) is a simple library to make working with HTML5 canvas graphics easier.

## Installation

```

npm i mgine

```

```

pnpm i mgine

```

```

yarn add mgine

```

```

bun i mgine

```

## Usage

```js

import Mgine from 'mgine';

const mgine = Mgine.Init('canvas-id', { /* options */ });

// or

const mgine2 = new Mgine('canvas-id', { /* options */ });

mgine.fillRect({ x: 10, y: 10, width: 50, height: 50 }, 'green');

```