CompoDraw JS

Compose & Draw for JavaScript

Easiest way to compose shapes and effects with XML or JSX then draw them into HTML5 Canvas, without sacrifices modularity and compatibility among web frameworks.

CompoDraw uses multiple instructs with each of them tells Canvas API how to draw specific thing like a shape or visual effect (e.g. Rotate, Move, Mask, ...). All you need to do is just arrange them by writing XML, or JSX if you are ReactJS user.

Instructs are bundled into one package, commonly wrapped with UMD module format. So you can import it to any web framework of your choice :)

How to Install

1. Add to your project with Yarn:

   yarn add compodraw

   or with NPM:

   npm install compodraw --save

   or you can download the bundled JavaScript file for plain HTML or PHP project
2. Then pick your preferred instructs package. For basic operation, use compodraw-instructs. If you want, you can build your own instructs package with each instruct is a class that has at least draw(canvasContext) method
3. That's it! now you can use CompoDraw 😁

How to Use

First of all, make sure your front-end project already initialized. You can choose either React, Vue, Angular, PHP, or plain HTML. And then, choose your usage method:

Use with React's JSX

With React, you are able to use the benefit of JSX. Here's the example.

Use with React's JSX (with Tree Shaking)

For production, we recommend you to follow this example instead of above.

Use with XML

For other than React-based web project, you can still use XML data and compose it without parse by yourself. Here's the example.

Use with Embedded XML inside HTML Tag

Embedding XML into HTML is now possible for CompoDrawJS. See the example.

Use only with JavaScript

For logic-based composition, you can compose Instructs directly without composeWith* function. See the example.

How to Contribute

You are free to contribute by opening an issue or pull-request. But before pull-request, it's better to test your changes locally with this command:

yarn run test

or with NPM:

npm run test

Then pull request after all of those tests passed.

NOTE: Test is not necessary if you only modify the docs or source code style

Test on a Computer without GPU

If you are using VM like Hyper-V or Windows Subsystem for Linux (WSL), install docker first. Then run this command:

yarn run test:no-gpu

or with NPM:

npm run test:no-gpu