@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
npm i @georgedoescode/cx
<script src="https://unpkg.com/@georgedoescode/cx">
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:
<!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>
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).
Creates a new cx instance.
| 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 |
{
ctx: {
base, // CanvasRenderingContext2D
registerCustomMethod // (fn) - register custom drawing method
},
element: {
el, // <canvas> DOM element
setPXDensity // (fn) - scale <canvas> element and context
}
}
FAQs
CX 🎨
The npm package @georgedoescode/cx receives a total of 2 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.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.