https://github.com/mcchatman8009/native-canvas
A canvas library that allows for a HTML canvas to run natively on NodeJs, without a WebBrowser
https://github.com/mcchatman8009/native-canvas
2d 2d-graphics canvas es6 game graphics html-canvas html5 javascript native-canvas native-javascript node nodejs sdl sdl2 typescript
Last synced: about 2 months ago
JSON representation
A canvas library that allows for a HTML canvas to run natively on NodeJs, without a WebBrowser
- Host: GitHub
- URL: https://github.com/mcchatman8009/native-canvas
- Owner: mcchatman8009
- License: mit
- Created: 2018-12-09T06:02:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-08T14:53:59.000Z (7 months ago)
- Last Synced: 2025-02-20T15:05:38.434Z (2 months ago)
- Topics: 2d, 2d-graphics, canvas, es6, game, graphics, html-canvas, html5, javascript, native-canvas, native-javascript, node, nodejs, sdl, sdl2, typescript
- Language: TypeScript
- Homepage:
- Size: 11.2 MB
- Stars: 32
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LiCENSE
Awesome Lists containing this project
README
# native-canvas
## Overview
The purpose and intent of this project was to create a library that allows for developers
to create a browser canvas element that runs natively, without the need of a WebBrowser.
Allowing for developers to code and develop portable canvas based applications that
can run both on the WebBrowser and natively on any NodeJS platform.
## Requirements
* NodeJS 10+
## Getting Stated
* Install the **native-canvas** library
```bash
npm install native-canvas
```
## A Simple Example
```javascript
// Load the library
require('native-canvas');
// Use the globally exposed canvas
const ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
```
View the [samples](./samples) directory to see more examples.
## Running a Browser Example
```javascript
// Load the library
require('native-canvas');
// Title the title attribute
document.title = 'Create Canvas with Document';
// Provides the current running canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");
canvas.height = 150;
ctx.lineWidth = 1;
ctx.clearRect(0, 0, 400, 400);
ctx.beginPath();
ctx.arc(40, 40, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
```
## Mac OS [Apple Silicon]
To install you need to install system deps first.
```bash
brew install python
arch -arm64 brew install pkg-config cairo pango jpeg giflib librsvg libffi
```
## Raspberry Pi
To install on Raspberry Pi, you need to prep your environment
by installing a few dev libraries.
```bash
sudo apt install \
libpixman-1-dev \
libcairo2-dev \
libpango1.0-dev \
libjpeg-dev \
libgif-dev \
libsdl2-dev
```
## Screenshots
## Acknowledgments
Special Thanks to [@dmcquillan314](https://github.com/dmcquillan314) for the support!