Utility-HTML5Canvas

Pure JavaScript library for HTML5 Canvas API.

• Provides data structures like stack, queue, linked list, graphs and vectors.
• Easy to use vector functions.
• Create shapes of any number of sides.
• Export Shapes/Canvas with ease.

Installation

Download or clone it using.

git clone https://github.com/0-harshit-0/Utility-HTML5Canvas.git

Include the utility.js file in your html file.

<script type="text/javascript" src="utility.js" defer></script>

or If you want seperate files, you can include them like this

<script type="text/javascript" src="/src/shapes.js" defer></script>
<script type="text/javascript" src="/src/vector.js" defer></script>
<script type="text/javascript" src="/src/stack.js" defer></script>
<script type="text/javascript" src="/src/queue.js" defer></script>

or You can even use the JsFiddle CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/0-harshit-0/Utility-HTML5Canvas/utility.js" defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/0-harshit-0/Utility-HTML5Canvas/utility.min.js" defer></script>

Usage

Data Structures

Use Stack, Queue, Linked List and Graph, Wiki.

Vectors

You can create a 2D vector object and perform various Vector related function, Wiki.

Shapes

Apart from basic shapes provided in context interface, you can draw triangle, pentagon, hexagon, etc. which are not supported in canvas directly. You can also export Shapes or the whole Canvas or only a part of it as well. (Current only PNG format is supported.) For Detailed Guide refer Wiki.