2d:null 2e:["$","title",null,{"children":"Path-to-Canvas with Icon Sheet | bchoatejr | Observable"}] 33:T64e,icons = { const height = 200; const ctx = this ? this.getContext('2d') : DOM.context2d(width, height); const canvas = ctx.canvas; const sty = {fillStyle:"#a3e", lineWidth:12, lineCap:"butt", lineJoin:"bevel", miterLimit:10, strokeStyle:"#fff"}; const bsty = {fillStyle:"#000", lineWidth:5, lineCap:"butt", lineJoin:"bevel", miterLimit:10, strokeStyle:"#11f"}; const arr = Array.from(symbols.querySelectorAll('symbol')); const w = 150; const cols = Math.floor(width / w) const rows = Math.floor(height / w); const n = cols*rows; const sa = width / cols; const mws = w / symbol_ext.width.max; const mhs = w / symbol_ext.height.max; let scale = mws > mhs ? mhs : mws; // const scale = 0.25; // symbol_ext = // x: // y: // width: // height: for (let i=0; i ` 35:[] 31:{"id":"401f039ee9e3ef01","slug":"path-to-canvas-with-icon-sheet","title":"Path-to-Canvas with Icon Sheet","thumbnail":"8653c7bed00d0e084856fd4d48f63f2441d84bb6106346b6b24a56c29209caca","access_level":"public","create_time":"$D2019-08-02T03:04:39.274Z","update_time":"$D2019-10-11T14:31:46.158Z","view_time":null,"first_public_time":"$D2019-10-01T12:25:56.302Z","has_unpublished_edits":null,"fork":{"id":"4f6158496b248379","slug":"path-to-canvas","title":"Path-to-Canvas","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"727607e20e3c61f9","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":"starter_2024"},"version":1116,"publish_version":1116,"role":null,"authored":false,"authors":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null}],"members":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"a3fc927b5af97b4d","slug":"graphics","title":"graphics","owner":{"id":"727607e20e3c61f9","login":"bchoatejr","name":""}},"type":"notebook","body":{"title":"Path-to-Canvas with Icon Sheet","cells":[{"id":48,"value":"md`# Path-to-Canvas with Icon Sheet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md` determine svg icons sizes; scale and draw to canvas\n\n**${sym_arr.length }** svg icons at [symbols](#symbols).\n\n${Object.keys(symbol_ext).map(d=>`${d}: min:${symbol_ext[d].min}, max:${symbol_ext[d].max} `)}\n`\n\n// ${tex`\\alpha`}\n// symbol_ext","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"md`**canvas**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"md`**SVG**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"symbolPaths(symbols)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"cmds = ({M: (c, d)=>c.moveTo(d[0], d[1]), \n L: (c, d)=>c.lineTo(d[0], d[1]), \n C: (c, d)=>c.bezierCurveTo(d[0], d[1], d[2], d[3], d[4], d[5]), \n Z: (c, d)=>c.closePath(), })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"viewboxes = {\n const viewboxes = [];\n const syms = Array.from(symbols.querySelectorAll('symbol'));\n \n for (let i=0; i{\n const min = Math.min(...viewboxes.map(vb=>vb[d]));\n const max = Math.max(...viewboxes.map(vb=>vb[d]));\n const rV = {min:min, max:max};\n objs[d]=rV;\n return rV;\n });\n return objs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"function symbolPaths(svg) {\n const entries = Array.from(svg.querySelectorAll('symbol')).map(e => ``);\n return html`\n ${entries.join('')}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"function drawPath(ctx, dpth, sty) {\n const cmds = ({M: (c, d)=>c.moveTo(d[0], d[1]), \n L: (c, d)=>c.lineTo(d[0], d[1]), \n C: (c, d)=>c.bezierCurveTo(d[0], d[1], d[2], d[3], d[4], d[5]), \n Z: (c, d)=>c.closePath(), }) \n \n const segs = PathData.parse(dpth, {normalize: true});\n\n ctx.save();\n ctx.beginPath();\n Object.assign(ctx, sty); \n for (let i=0; i