		@@ -5,11 +5,11 @@ # CX 🎨

		## Why?

		There are a couple of things I wish `canvas` did:

		- Scale to the DPR of the screen
		- Allow definition of custom drawing methods
		- Allow definition of custom drawing methods without having to extend prototypes

		CX aims to provide both of these whilst staying out of the way and not disrupting your workflow.

		---

		## Installation
		@@ -20,3 +20,2 @@
		```bash
		# npm
		npm i @georgedoescode/cx
		@@ -31,8 +30,10 @@ ```

		---

		## Usage

		Browser

		The _(probably)_ easiest and quickest way of getting started with cx is to grab the library from `unpkg`, pop it in a `script` tag and start having a poke.

		Here is an example:

		```html
		@@ -61,3 +62,3 @@ <!DOCTYPE html>

		### Usage with module bundlers
		Module bundlers

		@@ -79,23 +80,14 @@ CX exports the function `createCanvas`, this can be used to build a new cx instance.

		---

		## Documentation

		### createCanvas
		### `createCanvas`

		Creates a new cx instance.
		Creates a new cx instance. A cx instance has 2 parts: `element` and `context`.

		#### Options:

		\| Name \| Type \| Default \| Description \|
		\| -------- \| ------------- \| ------------------------- \| -------------------------------------- \|
		\| `width` \| `Integer` \| `400` \| The width of the canvas \|
		\| `height` \| `Integer` \| `400` \| The height of the canvas \|
		\| `mount` \| `DOM Element` \| `document.body` \| Where the `canvas` element is appended \|
		\| `dpr` \| `Integer` \| `window.devicePixelRatio` \| Mutliplier for canvas dimensions \|

		#### Returns:

		```javascript
		{
		ctx: {
		base, // CanvasRenderingContext2D
		_base, // CanvasRenderingContext2D (should never need to be accessed directly)
		registerCustomMethod // (fn) - register custom drawing method
		@@ -110,2 +102,58 @@ },

		### registerCustomMethod
		Example

		```javascript
		import { createCanvas } from '@georgedoescode/cx';

		const { ctx, element } = createCanvas({
		width: 640,
		height: 480,
		});

		// ctx can be used in exactly the same way as a CanvasRenderingContext2D instance
		ctx.lineWidth = 2;

		ctx.moveTo(0, 0);
		ctx.lineTo(0, 0, 200, 200);
		```

		#### Options:

		\| Name \| Type \| Default \| Description \|
		\| -------- \| ------------- \| ------------------------- \| -------------------------------------- \|
		\| `width` \| `Integer` \| `400` \| The width of the canvas \|
		\| `height` \| `Integer` \| `400` \| The height of the canvas \|
		\| `mount` \| `DOM Element` \| `document.body` \| Where the `canvas` element is appended \|
		\| `dpr` \| `Integer` \| `window.devicePixelRatio` \| Pixel density. \|

		### `ctx.registerCustomMethod`

		Register a custom drawing method to `ctx`.

		Example

		```javascript
		import { createCanvas } from '@georgedoescode/cx';

		const { ctx } = createCanvas({
		width: 640,
		height: 480,
		});

		// ctx.base is always passed as the first argument
		ctx.registerCustomMethod('line', (ctx, x0, y0, x1, y1) => {
		ctx.moveTo(0, 0);
		ctx.lineTo(x1, y1);
		ctx.stroke();
		});

		// tada! we can call our custom method on ctx
		ctx.line(0, 0, 200, 200);
		```

		#### Options:

		\| Name \| Type \| Default \| Description \|
		\| ----------- \| -------------------------- \| ----------- \| ------------------------------------------------ \|
		\| `ctx` \| `CanvasRenderingContext2D` \| `null` \| The native canvas context \|
		\| `arguments` \| `any` \| `undefined` \| Arbitrary additional arguments for custom method \|

@georgedoescode/cx - npm Package Compare versions

Improved metrics