https://github.com/jingwood/js-drawing2d

Javascript canvas 2D drawing library. Supports both immediate-mode rendering and 2D scene rendering.
https://github.com/jingwood/js-drawing2d

2d canvas canvas-2d-context drawing immediate-mode javascript js object rendering rendering-engine scene

Last synced: 2 months ago
JSON representation

Javascript canvas 2D drawing library. Supports both immediate-mode rendering and 2D scene rendering.

• Host: GitHub
• URL: https://github.com/jingwood/js-drawing2d
• Owner: jingwood
• License: mit
• Created: 2019-12-09T16:32:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-11T12:58:35.000Z (4 months ago)
• Last Synced: 2024-10-17T17:55:22.089Z (2 months ago)
• Topics: 2d, canvas, canvas-2d-context, drawing, immediate-mode, javascript, js, object, rendering, rendering-engine, scene
• Language: JavaScript
• Size: 1.14 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# js-drawing2d

Lightweight Javascript canvas 2D drawing library. Supports both immediate-mode rendering and 2D scene rendering.

# Installation

```shell

yarn add @jingwood/drawing2d

```

# Hello-world

```js

const renderer = new Renderer2D({

  canvasId: "myCanvas"

});

const scene = new Scene2D();

// create a rectangle object

const rect1 = new Rectangle2D();

rect1.origin.set(500, 300);

rect1.size.set(400, 300);

// rotate 45˚

rect1.angle = 45;

scene.add(rect1);

renderer.show(scene);

```

[See example code](test/test.js)

# API Objects

- **Renderer** - The rendering context.

- **Graphics** - Provides the immediate-mode rendering APIs.

- **Scene** - Collection of objects to be rendered.

- **Object** - An object instance inside scene to be rendered.

# Built-in geometry objects

- Line Segment

- Rectangle2D

- Ellipse2D

- Polygon2D

- Image2D

# License

Released under MIT license.

Copyright (c) 2015-2024 Jingwood, UNVELL Inc., All rights reserved.