{"_id":"@chemicalluck/canvas-txt","_rev":"1-c6ed305c197e6007d8b13735036e8236","name":"@chemicalluck/canvas-txt","dist-tags":{"latest":"4.2.1"},"versions":{"4.2.0":{"name":"@chemicalluck/canvas-txt","version":"4.2.0","keywords":["vue","react","library","canvas","Multiline","es6"],"author":{"url":"https://geongeorge.com","name":"Geon George","email":"me@geongeorge.com"},"license":"MIT","_id":"@chemicalluck/canvas-txt@4.2.0","maintainers":[{"name":"chemicalluck","email":"j.tebbett@outlook.com"}],"homepage":"https://canvas-txt.geongeorge.com","bugs":{"url":"https://github.com/geongeorge/Canvas-Txt/issues"},"dist":{"shasum":"a3636bf01bb19fcd4034bcb28f77c2ef2ad91ae3","tarball":"https://registry.npmjs.org/@chemicalluck/canvas-txt/-/canvas-txt-4.2.0.tgz","fileCount":6,"integrity":"sha512-EolIEx8PddZEs7dSjg9h9crEUqie9yfCOT6IiHLZk5+VxhW03mkg682ViKljt7NAECaMWjgLtQ1bLdgSdajBGQ==","signatures":[{"sig":"MEYCIQCOPtJNzY4geBx7AIWvScfAgjRY71ZE67W2MmCLTEiZwgIhAN5I6ewSPIVCC8Xrwr+Kl8dDmEVBFwBgTzzIfVUSVjG2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15885},"main":"./dist/canvas-txt.umd.js","types":"./dist/canvas-txt.d.ts","module":"./dist/canvas-txt.mjs","exports":{".":{"types":"./dist/canvas-txt.d.ts","import":"./dist/canvas-txt.mjs","require":"./dist/canvas-txt.umd.js"}},"gitHead":"eb6ac4ba8dee133054eaded0116212ff595ea92d","scripts":{"dev":"vite serve --config config/vite.config.docs.ts","build":"tsc && vite build --emptyOutDir --config config/vite.config.ts && yarn build:dts","prepare":"yarn build","dev:node":"vite-node ./src/node-test.ts","build:dts":"tsup src/canvas-txt/index.ts --dts-only && mv dist/index.d.ts dist/canvas-txt.d.ts","build:docs":"tsc && vite build --config config/vite.config.docs.ts"},"_npmUser":{"name":"chemicalluck","email":"j.tebbett@outlook.com"},"repository":{"url":"git+https://github.com/geongeorge/Canvas-Txt.git","type":"git"},"_npmVersion":"10.2.4","description":"Render multiline textboxes in HTML5 canvas with auto line breaks and better alignment system","directories":{},"_nodeVersion":"21.6.1","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.37","tsup":"^7.2.0","vite":"^4.4.4","canvas":"^2.11.2","lodash":"^4.17.21","vite-node":"^0.33.0","typescript":"^4.7.4","element-plus":"^2.2.12","@types/lodash":"^4.14.182","@vitejs/plugin-vue":"^3.0.1","unplugin-auto-import":"^0.11.0","unplugin-vue-components":"^0.22.0"},"_npmOperationalInternal":{"tmp":"tmp/canvas-txt_4.2.0_1728305288890_0.1446449851095737","host":"s3://npm-registry-packages"}},"4.2.1":{"name":"@chemicalluck/canvas-txt","version":"4.2.1","description":"Render multiline textboxes in HTML5 canvas with auto line breaks and better alignment system","scripts":{"dev":"vite serve --config config/vite.config.docs.ts","dev:node":"vite-node ./src/node-test.ts","build":"tsc && vite build --emptyOutDir --config config/vite.config.ts && yarn build:dts","build:dts":"tsup src/canvas-txt/index.ts --dts-only && mv dist/index.d.ts dist/canvas-txt.d.ts","build:docs":"tsc && vite build --config config/vite.config.docs.ts","prepare":"yarn build"},"main":"./dist/canvas-txt.umd.js","module":"./dist/canvas-txt.mjs","types":"./dist/canvas-txt.d.ts","exports":{".":{"import":"./dist/canvas-txt.mjs","require":"./dist/canvas-txt.umd.js","types":"./dist/canvas-txt.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/geongeorge/Canvas-Txt.git"},"author":{"name":"Geon George","email":"me@geongeorge.com","url":"https://geongeorge.com"},"license":"MIT","bugs":{"url":"https://github.com/geongeorge/Canvas-Txt/issues"},"homepage":"https://canvas-txt.geongeorge.com","keywords":["vue","react","library","canvas","Multiline","es6"],"devDependencies":{"@types/lodash":"^4.14.182","@vitejs/plugin-vue":"^3.0.1","canvas":"^2.11.2","element-plus":"^2.2.12","lodash":"^4.17.21","tsup":"^7.2.0","typescript":"^4.7.4","unplugin-auto-import":"^0.11.0","unplugin-vue-components":"^0.22.0","vite":"^4.4.4","vite-node":"^0.33.0","vue":"^3.2.37"},"dependencies":{},"_id":"@chemicalluck/canvas-txt@4.2.1","gitHead":"55b53df86140e3d6a7f82de31f99eea62cd050ca","_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-FYAGuz91K8jLuR6RHsBPW24YH42jxd43WDv5pV0ZB90YSOG1tFQNuGKkBLGA0+c6stF+XYh2SHoRkRp7kQjmlA==","shasum":"69bc1596959f437ac33f9f6ff9e8d253e79697c2","tarball":"https://registry.npmjs.org/@chemicalluck/canvas-txt/-/canvas-txt-4.2.1.tgz","fileCount":6,"unpackedSize":15917,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpPs2mQxk38+5zHztBpB7TSqY3QrDofbkH46YyVw3QFgIgHptXZmj2MLZ/SBBzJC3QVIvrvpSO6Y6FVaUmJp6yXVY="}]},"_npmUser":{"name":"chemicalluck","email":"j.tebbett@outlook.com"},"directories":{},"maintainers":[{"name":"chemicalluck","email":"j.tebbett@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/canvas-txt_4.2.1_1728375630283_0.7073280721000246"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-07T12:48:08.796Z","modified":"2024-10-08T08:20:30.652Z","4.2.0":"2024-10-07T12:48:09.060Z","4.2.1":"2024-10-08T08:20:30.459Z"},"bugs":{"url":"https://github.com/geongeorge/Canvas-Txt/issues"},"author":{"name":"Geon George","email":"me@geongeorge.com","url":"https://geongeorge.com"},"license":"MIT","homepage":"https://canvas-txt.geongeorge.com","keywords":["vue","react","library","canvas","Multiline","es6"],"repository":{"type":"git","url":"git+https://github.com/geongeorge/Canvas-Txt.git"},"description":"Render multiline textboxes in HTML5 canvas with auto line breaks and better alignment system","maintainers":[{"name":"chemicalluck","email":"j.tebbett@outlook.com"}],"readme":"
\n\"canvas-txt\n

Canvas Txt 📐

\n

\nTransforming Your Canvas with Multiline Magic ✨\n

\n\n

\n\n\"NPM\"\n\n\"NPM\"\n\n\"NPM\"\n\n

\n\n#### A Miniscule library to render text on HTML5 Canvas with ZERO dependencies\n\n
\n\n## Features\n\n- [x] Multiline text\n- [x] Auto line breaks\n- [x] Horizontal Align\n- [x] Vertical Align\n- [x] Justify Align\n- [x] Easy Debugging\n- [x] Improved Performance\n\n## Demo\n\nSee Demo: [Here](https://canvas-txt.geongeorge.com)\n\n## Install\n\n```\nyarn add canvas-txt\n\nor\n\nnpm i canvas-txt\n```\n\n# Usage\n\n```html\n\n```\n\n## Bundler\n\n```javascript\nimport { drawText } from 'canvas-txt'\n\nconst c = document.getElementById('myCanvas')\nconst ctx = c.getContext('2d')\n\nctx.clearRect(0, 0, 500, 500)\n\nconst txt = 'Lorem ipsum dolor sit amet'\n\nconst { height } = drawText(ctx, txt, {\n x: 100,\n y: 200,\n width: 200,\n height: 200,\n fontSize: 24,\n})\n\nconsole.log(`Total height = ${height}`)\n```\n\n## Node canvas\n\nSee Node js demo in [./src/node-test.ts](https://github.com/geongeorge/Canvas-Txt/blob/master/src/node-test.ts)\n\n```js\nconst { createCanvas } = require('canvas')\nconst { drawText } = require('canvas-txt')\nconst fs = require('fs')\n\n// Or\n// import { createCanvas } from 'canvas'\n// import { drawText } from 'canvas-txt'\n// import * as fs from 'fs'\n\nfunction main() {\n const canvas = createCanvas(400, 400)\n const ctx = canvas.getContext('2d')\n const txt = 'Hello World!'\n\n const { height } = drawText(ctx, txt, {\n x: 100,\n y: 200,\n width: 200,\n height: 200,\n fontSize: 24,\n })\n\n // Convert the canvas to a buffer in PNG format\n const buffer = canvas.toBuffer('image/png')\n fs.writeFileSync('output.png', buffer)\n console.log(`Total height = ${height}`)\n}\n\nmain()\n```\n\n## CDN\n\nSee fiddle : https://jsfiddle.net/geongeorgek/n5xw3ufj/2/\n\n```html\n\n```\n\n```javascript\nconst { drawText, getTextHeight, splitText } = window.canvasTxt\n/// ...remaining same\n```\n\n![](./src/docs/canvas.jpg)\n\n## Properties\n\n| Properties | Default | Description |\n| :-----------: | :----------: | :----------------------------------------------------------------------------- |\n| `width` | **Required** | Width of the text box |\n| `height` | **Required** | Height of the text box |\n| `x` | **Required** | X position of the text box |\n| `y` | **Required** | Y position of the text box |\n| `debug` | `false` | Shows the border and align gravity for debugging purposes |\n| `align` | `center` | Text align. Other possible values: `left`, `right` |\n| `vAlign` | `middle` | Text vertical align. Other possible values: `top`, `bottom` |\n| `drawStyle` | `fill` | Text draw style. Other possible values: `outline` |\n| `font` | `Arial` | Font family of the text |\n| `fontSize` | `14` | Font size of the text in px |\n| `fontStyle` | `''` | Font style, same as css font-style. Examples: `italic`, `oblique 40deg` |\n| `fontVariant` | `''` | Font variant, same as css font-variant. Examples: `small-caps`, `slashed-zero` |\n| `fontWeight` | `''` | Font weight, same as css font-weight. Examples: `bold`, `100` |\n| `lineHeight` | `null` | Line height of the text, if set to null it tries to auto-detect the value |\n| `justify` | `false` | Justify text if `true`, it will insert spaces between words when necessary. |\n\n## Methods\n\n```js\nimport { drawText, splitText, getTextHeight } from 'canvas-txt'\n```\n\n| Method | Description |\n| :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `drawText(ctx,text, config)` | To draw the text to the canvas |\n| `splitText({ ctx, text, justify, width }` | To split the text `{ ctx: CanvasRenderingContext2D, text: string, justify: boolean, width: number }` |\n| `getTextHeight({ ctx, text, style })` | To get the height of the text `{ ctx: CanvasRenderingContext2D, text: string, style: string (font style we pass to ctx.font) }` [ctx.font docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font) |\n","readmeFilename":"README.md"}