2b:null 2c:["$","title",null,{"children":"Canvas Text Bounding Box | Benjamin | Observable"}] 31:[] 2f:{"id":"30ae64c6ec7294e7","slug":"canvas-text-bounding-box","title":"Canvas Text Bounding Box","thumbnail":"a2d8606c23f6c5bc84f4c5ff91432b0f383b85cc6083a09e891b02fc887e8612","access_level":"public","create_time":"$D2019-11-25T08:53:42.318Z","update_time":"$D2019-12-04T23:24:30.877Z","view_time":null,"first_public_time":"$D2019-11-25T09:20:18.053Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":573,"publish_version":573,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Canvas Text Bounding Box","cells":[{"id":0,"value":"md`# Canvas Text Bounding Box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"md`\n~~~md\n## TODO\n\n- [ ] documentation for functions.\n- [ ] parameter offsetX and offsetY.\n- [x] parameter dpi for retina displays.\n~~~\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"viewof textString = textInput({ value: \"Hello, world!\", title: \"Text\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"{\n const dpi = devicePixelRatio\n const context = DOM.context2d(width, 100, dpi)\n const canvas = context.canvas\n \n // render text.\n context.fillStyle = \"black\"\n context.font = \"30px sans-serif\"\n context.textAlign = \"left\"\n context.textBaseline = \"middle\"\n const textWidth = context.measureText(textString).width\n context.fillText(textString, (canvas.width / 2 / dpi) - (textWidth / 2), canvas.height / 2 / dpi)\n \n // render bbox.\n const bbox = boundingBoxOfCanvas(context, 0, 0, canvas.width, canvas.height, dpi)\n context.strokeStyle = \"red\"\n context.strokeRect(bbox.x, bbox.y, bbox.width, bbox.height)\n \n return demoContainer(canvas)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"md`

\nboundingBoxOfCanvas : Context × X × Y × Width × Height × Dpi → Bbox

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"boundingBoxOfCanvas = (context, x, y, width, height, dpi = 1) => {\n const points = collectPoints(context, x, y, width, height)\n const bbox = calculateBoundingBox(points)\n return { \n x: bbox.x / dpi, \n y: bbox.y / dpi, \n width: bbox.width / dpi,\n height: bbox.height / dpi,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`

\nboundingBoxOfText : Text × Options → Bbox

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"boundingBoxOfText = (text, options = {}) => {\n const dpi = options.dpi || 1\n const offsetX = options.offsetX || 0\n const offsetY = options.offsetY || 0\n const fontSize = options.fontSize || undefined\n const fontFamily = options.fontFamily || undefined\n \n const canvas = document.createElement(\"canvas\")\n canvas.width = options.width || 1000\n canvas.height = options.height || 1000\n\n const context = canvas.getContext(\"2d\")\n renderText(context, text, offsetX, offsetY, fontSize, fontFamily)\n return boundingBoxOfCanvas(context, 0, 0, canvas.width, canvas.height, dpi)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"renderText = (context, text, x, y, fontSize = 20, fontFamily = \"sans-serif\") => {\n context.font = `${fontSize}px ${fontFamily}`\n context.textBaseline = \"top\"\n context.textAlign = \"left\"\n context.fillStyle = \"black\"\n context.fillText(text, x, y)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"renderBox = (context, x, y, width, height, color = \"black\") => {\n context.fillStyle = color\n context.fillRect(x, y, width, height)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"renderBoxOutline = (context, x, y, width, height, color = \"red\") => {\n context.strokeStyle = color\n context.strokeRect(x, y, width, height)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"md`### canvas of box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"viewof canvasOfBox = {\n const dpi = devicePixelRatio\n const context = DOM.context2d(width, 150, dpi)\n \n renderBox(context, 10, 20, 80, 90, \"black\")\n return demoContainer(context.canvas)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"bboxOfBox = {\n const dpi = devicePixelRatio\n const canvas = canvasOfBox\n const context = canvasOfBox.getContext(\"2d\")\n \n const bbox = boundingBoxOfCanvas(context, 0, 0, canvas.width, canvas.height, dpi)\n return bbox\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"md`### canvas of text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"viewof canvasOfText = {\n const dpi = devicePixelRatio\n const context = DOM.context2d(width, 150, dpi)\n \n const text = \"Hello, world!\"\n const fontSize = 30\n renderText(context, text, 10, 20, fontSize, \"sans-serif\")\n \n return demoContainer(context.canvas)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"bboxOfText = {\n const dpi = devicePixelRatio\n const canvas = canvasOfText\n const context = canvasOfText.getContext(\"2d\")\n \n const bbox = boundingBoxOfCanvas(context, 0, 0, canvas.width, canvas.height, dpi)\n renderBoxOutline(context, bbox.x, bbox.y, bbox.width, bbox.height)\n return bbox\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"{\n const dpi = devicePixelRatio\n const context = DOM.context2d(width, 150, dpi)\n \n const text = \"Hello, world!\"\n const fontSize = 30\n renderText(context, text, 10, 20, fontSize, \"sans-serif\")\n \n const bbox = boundingBoxOfCanvas(context, 0, 0, context.canvas.width, context.canvas.height, dpi)\n renderBoxOutline(context, bbox.x, bbox.y, bbox.width, bbox.height)\n \n return demoContainer(context.canvas)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"md`### canvas image data of single pixel`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`\nBits per pixel. This creates a canvas of 1×1 pixels size and fills the single pixel with \\`rgba(1, 2, 3, 1.0)\\`. The image data \\`Uint8ClampedArray(4) [1, 2, 3, 255]\\` shows, that we have 4 bits per pixel and the alpha channel is at index 3.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"canvasImageDataOfSinglePixel = {\n const dpi = 1\n const context = DOM.context2d(1, 1, dpi)\n const canvas = context.canvas\n \n context.fillStyle = \"rgba(1, 2, 3, 1.0)\"\n context.fillRect(0, 0, canvas.width, canvas.height)\n \n const data = context.getImageData(0, 0, canvas.width, canvas.height).data\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"collectPoints = (context, offsetX, offsetY, width, height) => {\n const BITS_PER_PIXEL = 4\n const ALPHA_CHANNEL_OFFSET = 3\n const data = context.getImageData(offsetX, offsetY, width, height).data\n \n const points = []\n for (let y = 0; y < height; y += 1) {\n for (let x = 0; x < width; x += 1) {\n const pixelIndex = (y * width) + x\n const dataIndex = pixelIndex * BITS_PER_PIXEL\n const alphaValue = data[dataIndex + ALPHA_CHANNEL_OFFSET]\n \n if (alphaValue > 0) {\n points.push([x, y])\n }\n }\n }\n \n return points\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"calculateBoundingBox = (points) => {\n const bbox = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }\n \n for (const point of points) {\n bbox.minX = Math.min(point[0], bbox.minX)\n bbox.minY = Math.min(point[1], bbox.minY)\n bbox.maxX = Math.max(point[0] + 1, bbox.maxX)\n bbox.maxY = Math.max(point[1] + 1, bbox.maxY)\n }\n \n return { \n x: bbox.minX, \n y: bbox.minY, \n width: bbox.maxX - bbox.minX,\n height: bbox.maxY - bbox.minY,\n ...bbox,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"demoContainer = content => {\n const container = html`

${content}

`\n container.value = content\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"import { text as textInput } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"rasterize = (svg, scale = 1) => {\n let resolve, reject\n const promise = new Promise((y, n) => (resolve = y, reject = n))\n const image = new Image\n image.onerror = reject\n image.onload = () => {\n const rect = svg.getBoundingClientRect()\n const context = DOM.context2d(rect.width * scale, rect.height * scale)\n context.drawImage(image, 0, 0, rect.width * scale, rect.height * scale)\n context.canvas.toBlob(resolve)\n }\n image.src = URL.createObjectURL(serialize(svg))\n return promise\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\"\n const xlinkns = \"http://www.w3.org/1999/xlink\"\n const svgns = \"http://www.w3.org/2000/svg\"\n return function serialize(svg) {\n svg = svg.cloneNode(true)\n svg.setAttributeNS(xmlns, \"xmlns\", svgns)\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns)\n const serializer = new window.XMLSerializer\n const string = serializer.serializeToString(svg)\n return new Blob([string], { type: \"image/svg+xml\" })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"