		{
		"name": "@gush/candybar",
		"version": "0.0.0-alpha2",
		"description": "",
		"main": "src/index.js",
		"version": "0.0.0-alpha20",
		"description": "🍫",
		"main": "dist/index.js",
		"scripts": {
		"start": "",
		"build": "rollup -c --dir dist",
		"build": "NODE_ENV='production' rollup -c --dir dist",
		"docs": "documentation build src/index.js -o docs/docs.md -f md",
		"prepublishOnly": "npm run build"
		@@ -13,3 +14,4 @@ },
		"license": "ISC",
		"dependencies": {
		"devDependencies": {
		"babel-cli": "^6.26.0",
		"babel-core": "^6.26.3",
		@@ -20,7 +22,9 @@ "babel-plugin-external-helpers": "^6.22.0",
		"babel-preset-env": "^1.7.0",
		"babel-preset-flow": "^6.23.0",
		"documentation": "8.1.0",
		"flow-bin": "^0.78.0",
		"rollup": "^0.63.5",
		"rollup-plugin-babel": "^3.0.7",
		"rollup-plugin-node-resolve": "^3.3.0"
		},
		"devDependencies": {}
		}
		}

README.md

		# Candybar 🍫

		Starter for building things with `<canvas>`. Uses parcel to bundle and transpile code.
		A simple `<canvas>` rendering engine and collection of classes and utils. And by "engine" I mean about as advanced as a broken scooter 🛴

		🚨 This is an alpha release

		_Really, don't use this thing for anything yet._

		## Getting started

		Install it, duh.

		```
		yarn add @gush/candybar
		```

		Then create a canvas.

		```javascript
		import { Canvas } from '@gush/candybar';

		const canvas = new Canvas({
		canvas: document.getElementById('canvas'),
		});
		```

		This will create a beautiful blank canvas. 🙌🏻

		## Canvas options

		Canvas classes can be created with a few options:

		- `canvas`
		- `container`
		- `hasPointer`
		- `entities`

		```javascript
		new Canvas({
		// This is the required HTML element that the Canvas class will render to.
		canvas: document.getElementById('canvas'),
		// Container is the element that the canvas should be fit within,
		// if this is not provided it's assumed this is a full screen canvas
		container: document.getElementById('container'),
		// Indicates if the canvas should capture mouse/touch pointer events.
		hasPointer: true,
		// Entities are objects that will be renedered by the Canvas engine.
		entities: [...things],
		});
		```

		## Entities

		The engine will loop through each entity and call a couple methods to "render" the entity. First a `draw()` method is called where you should do any drawing using the HTML canvas API. Then an `update()` method is called which should be used to update any properties based on the engine.

		```javascript
		class MyThing {
		constructor() {
		this.x = 0;
		this.y = 0;
		}

		setup = ({ canvas }) => {
		// setup will be called once before the first draw and is provided the class context
		this.w = canvas.width / 10;
		};

		draw = ({ ctx }) => {
		// draw with canvas API through the provided context
		ctx.fillRect(this.x, this.y, 100, 100);
		};

		update = ({ pointer }) => {
		// update the rect position based on pointer position
		const { x, y } = this.pointer.position;
		this.x = x;
		this.y = y;
		};

		resize = (context, event) => {
		// handle resize events.
		this.w = context.canvas.width / 10;
		};
		}
		```

. npmignore

demo/index.html

demo/index.js

demo/package.json

demo/README.md

demo/styles.scss

src/index.js

src/modules/Background.js

src/modules/Bounds.js

src/modules/Canvas.js

src/modules/Cursor.js

src/modules/Entity.js

src/modules/Point.js

src/modules/Pointer.js

src/modules/Velocity.js

src/utils/index.js

.babelrc

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

@gush/candybar - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics

Dependency changes