@georgedoescode/cx
Advanced tools
A 💀 simple library created to provide a better canvas development experience.
There are a couple of things I wish canvas did:
CX aims to provide both of these whilst staying out of the way and not disrupting your workflow.
npm i @georgedoescode/cx
<script src="https://unpkg.com/@georgedoescode/cx">
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CX Example</title>
</head>
<body>
<div class="wrapper"></div>
<script src="https://unpkg.com/@georgedoescode/cx"></script>
<script>
// Create a new canvas, append to the DOM
const { ctx } = cx.createCanvas();
// Draw as you usually would!
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
</script>
</body>
</html>
Module bundlers
CX exports the function createCanvas, this can be used to build a new cx instance.
import { createCanvas } from '@georgedoescode/cx';
// Create a new canvas, append to the DOM
const { ctx } = createCanvas();
// Draw as you usually would!
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
Note: CX provides an es module (cx.es.js) build which should be used by Webpack 2+ / rollup etc, for everything else there is a UMD build (cx.min.js).
createCanvasCreates a new cx instance. A cx instance has 2 parts: element and context.
{
ctx: {
_base, // CanvasRenderingContext2D (should never need to be accessed directly)
registerCustomMethod // (fn) - register custom drawing method
},
element: {
el, // <canvas> DOM element
setPXDensity // (fn) - scale <canvas> element and context
}
}
Example
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.registerCustomMethodRegister a custom drawing method to ctx.
Example
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 |
FAQs
CX 🎨
The npm package @georgedoescode/cx receives a total of 1 weekly downloads. As such, @georgedoescode/cx popularity was classified as not popular.
We found that @georgedoescode/cx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.