{"library":"opentype.js","title":"OpenType.js","description":"OpenType.js is a JavaScript library designed for parsing and writing TrueType and OpenType fonts, providing deep access to font data and glyph outlines. The current stable version on npm is 1.3.4, released in 2021, though active development continues on the `master` branch with many bug fixes and new features awaiting a 2.0.0 release. It supports a wide range of font formats including WOFF, OTF, and TTF (both TrueType `glyf` and PostScript `cff` outlines). Key differentiators include its ability to create Bezier paths from text, handle composite glyphs, kerning (GPOS/kern table), ligatures, and TrueType font hinting. It runs seamlessly in both browser environments and Node.js, offering a low memory mode option for efficiency.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install opentype.js"],"cli":null},"imports":["import opentype from 'opentype.js'","import { load } from 'opentype.js'","import { parse } from 'opentype.js'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import opentype from 'opentype.js';\n\n// Simulate a canvas environment for Node.js or ensure this runs in a browser.\n// In a browser, getContext('2d') would work directly on a <canvas> element.\n// For Node.js, a library like 'canvas' would be needed.\n\n// Mocking a canvas context for demonstration purposes\nconst mockCanvasContext = {\n  beginPath: () => console.log('beginPath'),\n  moveTo: (x, y) => console.log(`moveTo(${x}, ${y})`),\n  lineTo: (x, y) => console.log(`lineTo(${x}, ${y})`),\n  quadraticCurveTo: (cx, cy, x, y) => console.log(`quadraticCurveTo(${cx}, ${cy}, ${x}, ${y})`),\n  bezierCurveTo: (c1x, c1y, c2x, c2y, x, y) => console.log(`bezierCurveTo(${c1x}, ${c1y}, ${c2x}, ${c2y}, ${x}, ${y})`),\n  closePath: () => console.log('closePath'),\n  fill: () => console.log('fill'),\n  stroke: () => console.log('stroke')\n};\n\nasync function loadAndDrawFont() {\n  try {\n    // Replace with a real font URL or path.\n    // For a local file in Node.js, you'd use fs.readFileSync and opentype.parse.\n    // For browser, 'fonts/Roboto-Black.ttf' would be relative to the HTML.\n    const font = await opentype.load('https://raw.githubusercontent.com/opentypejs/opentype.js/master/fonts/Roboto-Black.ttf');\n    console.log('Font loaded successfully.');\n\n    const text = 'Hello, World!';\n    const fontSize = 72;\n    const x = 0;\n    const y = 150;\n\n    // Construct a Path object containing the letter shapes\n    const path = font.getPath(text, x, y, fontSize);\n    console.log(`Generated path for text: \"${text}\"`);\n\n    // To draw on a real canvas:\n    // const ctx = document.getElementById('myCanvas').getContext('2d');\n    // path.draw(ctx);\n\n    // Using the mock context to show operations:\n    path.draw(mockCanvasContext);\n    console.log('Path drawing operations logged.');\n  } catch (err) {\n    console.error('Error loading or drawing font:', err);\n  }\n}\n\nloadAndDrawFont();","lang":"typescript","description":"Demonstrates asynchronous font loading from a URL and rendering text into a scalable vector path using the `getPath` method. Includes a mock canvas context for logging drawing operations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}