0.1.8 • Published 4 years ago

bitdraw v0.1.8

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

GitHub issues GitHub forks npm bundle size npm GitHub

Table of Contents :arrow_down:

About The Project :information_source:

Bitdraw Animation

Bitdraw is a simple and opinionated library that eases the use of the HTML5 Canvas API.

This library is focused on simplicity and intuition. As such, it tries to minimize the choice of how to render your content.

Also included are some convenient classes that will make some parts of your app easier to maintain (e.g. Vector manipulation, Hex/RGB color conversion, etc.).

Note: Although this library is published on npm, it is still in the pre-release stage. Expected bugs and unexpected behavior, as well as breaking changes.

Built With

This project was made and built with Typescript, and is made for use in a Typescript environment, although it is not required.

The bundled code published on NPM is built with Webpack, using the ts-loader package.

Getting Started :hammer:

Prerequisites

$ npm install npm@latest -g

Quick Start

  1. Clone the repo and cd into it
git clone https://github.com/mapokapo/bitdraw.git && cd bitdraw
  1. Install required packages and build the module
npm install && npm run tsc
  1. cd into the example/misc/ folder, install required packaged and run Webpack
cd example/misc/ && npm install && npm start
  1. Done! You can now publish your files or double-click your index.html file.

Installation

  1. Create a new NPM project
$ npm init
  1. Install the bitdraw package
$ npm i bitdraw
  1. Create an index.html file with a <canvas id="canvas"></canvas> inside it, as well as a link to your bundled code. You can find a template here.
  2. Install bundling software
$ npm i -D webpack webpack-cli typescript ts-loader
  1. Build your code with Webpack
npx webpack
  1. Done! You can now publish your files or double-click your index.html file.

Usage :zap:

This library can be imported through the ES6 import { ... } from ... statement AKA ESM, which is natively supported by Typescript.

Using the import * as Package from ... statement is not recommended, as the bundled files could potentially contain useless code. You can also import the library using the CommonJS require() function, although this is not recommended as CommonJS modules are not tree-shakable.

You can view more at the example project.

Bitdraw Code

TODO :white_check_mark:

  • Support transparency in the Color class.
  • Implement additional layers over the Canvas API (text, transform, styles, shapes...)

See the open issues for a list of proposed features (and known issues).

Documentation :book:

  1. Drawing Methods
  2. Utility Methods
  3. Globals
  4. Utilities

Drawing Methods

background(width, height, color)

stroke(loc1, loc2, color, width?)

circle(loc, radius, color, fill, width?)

arc(loc, radius, color, startAngle, endAngle, fill, width?)

rect(loc1, loc2, color, fill, width?)

triangle(loc1, loc2, loc3, color, fill, width?)

Utility Methods

clear()

  • description: * This function simply calls background(), except the arguments are always the current canvas width and height, and the color used in the last background()call. It is used to clear the canvas.

center(absolute?)

setup(callback)

update(callback)

Globals

canvas - [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)

The canvas element.

ctx - [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)

The 2D canvas rendering context.

CANVAS_WIDTH - [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)

The current width of the canvas element.

CANVAS_HEIGHT - [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)

The current height of the canvas element.

Utilities

class: Vector2

A 2D vector class that contains useful methods for creating and manipulating vectors.

Properties:

Methods:

  • static Vector2.from(v)
    • Creates a new vector from the coordinates of the supplied vector.
    • param v - <Vector2> A vector.
    • returns <Vector2> - A new vector.

class: Color

An RGB/hex color class that contains useful methods for translating color formats.

Properties:

Methods:

Contributing :heart:

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License :thumbsup:

Distributed under the MIT License. See LICENSE for more information.

Contact :phone:

Bunny - leopetrovic11@gmail.com

Project Link: https://github.com/mapokapo/bitdraw

Acknowledgements :innocent:

canvaslibrarygraphicsdrawingjsjavascripthtmlhtml5apiartgamegames
@everything-registry/sub-chunk-1240@zalastax/nolb-bitd
0.1.8

4 years ago