2b:null 2c:["$","title",null,{"children":"Canvas Madness | Job van der Zwan | Observable"}] 31:T4ab,# Canvas Madness So this is just a tiny selection of all the things that are probably being exploited for canvas fingerprinting out there, but from *my* point of view this is mainly a collection of the many tiny maddening browser differences that make it almost impossible to consistently draw pixel-perfect graphs on canvas. **Stroke Endpoint Anti-Aliasing.** You'd be surprised how hard it is to ensure that corner endpoints are not rendered with anti-aliasing on all browsers for single-pixel lines... None of the browsers seem to agree on how to render this. Not fun if you want to draw, say, dendrograms with single-pixel lines. Also note that on Chrome the top-left rectangle changes if you force software rendering by using the [`willReadFrequently`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently) option. The images below take a small canvases and upscales it onto a larger one so you can observe the pixels up close, [see here](https://observablehq.com/@jobleonard/gotta-keep-em-pixelated) for other techniques for creating pixelated canvases. Enable the toggle if the anti-aliased gray corners are too subtle to see on your screen32:Te3b,{ const _width = 80, height = 80; const ctxZoom = getCtx(Math.max(_width * 10, width), height * 10); ctxZoom.fillStyle = "#fff"; ctxZoom.fillRect(0, 0, Math.max(_width * 10, width), height * 10); ctxZoom.imageSmoothingEnabled = false; ctxZoom.font = "12px monospace"; ctxZoom.fillStyle = "#222"; const offset = 38; for (let i = 0; i < 2; i++) { for (let j = 0; j < 2; j++) { const ctx = getCtx(canvasSize, canvasSize, "2d", renderOpts.includes("force software rendering") ? {willReadFrequently: true} : {}); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvasSize, canvasSize); // 0.5, 1, 1.5, 2 const lineWidth = (2*j + (i+1))/2; ctx.lineWidth = lineWidth; ctx.strokeStyle = "#000"; // integer coordinates: // nope, half a pixel off ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(20, 10); ctx.lineTo(20, 20); ctx.lineTo(10, 20); ctx.lineTo(10, 10); ctx.closePath(); ctx.stroke(); // integer with half-pixel offset: // still nope, endpoints/corners are partially transparent ctx.beginPath(); ctx.moveTo(30.5, 10.5); ctx.lineTo(40.5, 10.5); ctx.lineTo(40.5, 20.5); ctx.lineTo(30.5, 20.5); ctx.lineTo(30.5, 10.5); ctx.stroke(); // half-pixel offset translation, integer coordinate: // nope, works on Chrome (Linux) but on Firefox (Linux) // it still has partially transparent endpoints/corners ctx.save(); ctx.translate(0.5, 0.5); ctx.beginPath(); ctx.moveTo(10, 30); ctx.lineTo(20, 30); ctx.lineTo(20, 40); ctx.lineTo(10, 40); ctx.closePath(); ctx.stroke(); ctx.restore(); // ctx.moveTo(x0, y0 + 0.5); ctx.lineTo(x1 + 0.5, y1 + 0.5) // results in proper corners for line-width 1. // seriously, what the heck?! ctx.beginPath(); ctx.moveTo(30, 30.5); ctx.lineTo(40.5, 30.5); ctx.moveTo(40.5, 30); ctx.lineTo(40.5, 40.5); ctx.moveTo(41, 40.5); ctx.lineTo(30, 40.5); ctx.moveTo(30.5, 40.5); ctx.lineTo(30.5, 30.5); ctx.closePath(); ctx.stroke(); ctxZoom.drawImage( ctx.canvas, 8, 8, 34, 34, 40 + offset * 10 * i, 100 + offset * 10 * j, (34 - 8) * 10, (34 - 8) * 10 ); } } if (renderOpts.includes("amplify brightness (highlight anti-aliased dark grays)")) { ctxZoom.filter = "brightness(300%)"; ctxZoom.drawImage(ctxZoom.canvas, 0, 0); } for (let i = 0; i < 2; i++) { for (let j = 0; j < 2; j++) { // 0.5, 1, 1.5, 2 const lineWidth = (2*j + (i+1))/2; ctxZoom.fillText( `line width: ${lineWidth}`, 40 + offset * 10 * i, 90 + offset * 10 * j ); ctxZoom.fillText( `integer coordinates`, 45 + offset * 10 * i, 225 + offset * 10 * j ); ctxZoom.fillText( `half-pixel offset`, 200 + offset * 10 * i, 225 + offset * 10 * j ); ctxZoom.fillText( `translate(0.5, 0.5)`, 45 + offset * 10 * i, 380 + offset * 10 * j ); ctxZoom.fillText( `moveTo(x0, y0 + 0.5); `, 200 + offset * 10 * i, 380 + offset * 10 * j ); ctxZoom.fillText( `lineTo(x1 + 0.5, y1 + 0.5);`, 200 + offset * 10 * i, 400 + offset * 10 * j ); } } ctxZoom.fillText(navigator.userAgent, 10, 20); ctxZoom.fillText(`canvas size: ${canvasSize} × ${canvasSize}`, 10, 40); return ctxZoom.canvas; }33:T719,{ const _width = 80, height = 55; const ctxZoom = getCtx(Math.max(_width * 10, width), height * 10); ctxZoom.fillStyle = "#fff"; ctxZoom.fillRect(0, 0, Math.max(_width * 10, width), height * 10); ctxZoom.imageSmoothingEnabled = false; ctxZoom.font = "12px monospace"; ctxZoom.fillStyle = "#222"; const offsetx = 8; const offsety = 30; const opts = { willReadFrequently: renderOpts.includes("force software rendering"), alpha: !renderOpts.includes("force opque canvas") } for (let i = 0; i < 6; i++) { const ctx = getCtx(canvasSize2, canvasSize2, "2d", opts); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvasSize2, canvasSize2); ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; for (let j = 0; j < 4; j++) { const hpOffset = (j < 2) ? 0.5 : 0; const x = 5 + hpOffset; const y = 6 + j * 13 + hpOffset; const r = (4 + i)/2; ctx.beginPath(); if (withMoveTo.includes("moveTo() before arc call")) ctx.moveTo(x+r, y); ctx.arc(x, y, r, 0, Math.PI*2); if (withMoveTo.includes("moveTo() after arc call")) ctx.moveTo(x, y); if (j & 1) ctx.stroke(); else ctx.fill(); } ctxZoom.drawImage( ctx.canvas, 0, 0, 20, 80, 20 + (offsetx+i/2) * 10 * i, 0, 20 * 10, 80 * 10 ); } if (renderOpts.includes("amplify brightness (highlight anti-aliased dark grays)")) { ctxZoom.filter = "brightness(300%)"; ctxZoom.drawImage(ctxZoom.canvas, 0, 0); } for (let j = 0; j < 4; j++) { const y = 116 + j * 130; ctxZoom.fillText(`${j < 2 ? "integer coordinates" : "half-pixel offset"}, ${(j&1) ? "stroke" : "fill"} only`, 50, y); } return ctxZoom.canvas; }34:T5f1,drawText = (alpha) => { const ctx = getCtx(1000, 1400, "2d", { alpha }); ctx.fillStyle = "#EEEEEE"; ctx.fillRect(0, 0, 1000, 1400); ctx.fillStyle = "black"; ctx.font = `${fontSize}px ${fontFamily ? fontFamily : "sans-serif"}`; const t1 = repeatedText ? repeatedText : "text"; const t2 = repeatedText2 ? repeatedText2 : "t"; const w1 = ctx.measureText(t1).width; const w2 = ctx.measureText(t2).width; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textRendering const textRendering = ["optimizeSpeed", "optimizeLegibility", "geometricPrecision"]; let k = 0; const x0 = 30, y0 = 65; const render = () => { const renderOpt = textRendering.pop(); ctx.fillText(`canvas alpha: ${alpha}`, x0 + 5, y0); ctx.fillText(renderOpt, x0 + 5, y0 + 22 + k * 55); for (let i = 0; i < 4; i++) { ctx.fillText(t1, x0 + 5 + (w1 + 4.25) * i, y0 + 40 + k * 55); } for (let j = 0; j < 4; j++) { for (let i = 0; i < 4; i++) { ctx.fillText(t2, x0 + 5 + (i + j*4) * (w2 + 1.25), y0 + 56 + j * 0.25 + k * 55); } } k++; if (textRendering.length) { setTimeout(render, 0); } else { ctx.imageSmoothingEnabled = false; ctx.drawImage(ctx.canvas, x0, y0 - 5 - (fontSize>>1), 300, 400, 0, 280, 1800, 2400); ctx.font = "12px monospace"; ctx.fillStyle = "#222"; ctx.fillText("100% zoom", 20, 30); ctx.fillText("600% zoom", 20, 260); } } setTimeout(render, 0); return ctx.canvas; };35:[] 2f:{"id":"fbdd2a5640bbe5c5","slug":"canvas-madness","title":"Canvas Madness","thumbnail":"5d5a4960e9b9d68bd5e6556193d23b6a53f8ff8d457065ecd94ea54927178d28","access_level":"public","create_time":"$D2022-01-15T15:34:06.370Z","update_time":"$D2025-10-23T09:48:26.772Z","view_time":null,"first_public_time":"$D2024-07-25T14:02:35.437Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":891,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"},{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"41c684675bc314af","reply_to_id":null,"content":"If you let context2d() handle the scaling of the canvas, you must call ctx.resetTransform() before .drawImage().\n\nI also recommend to always set ctx.canvas.style.maxWidth = '100%'","create_time":"$D2022-01-16T15:15:56.468Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"e6e0a5ca2b5b2a12","reply_to_id":"41c684675bc314af","content":"If you don't have a HiDPI display available, you can still emulate the behavior by passing a value > 1 as third argument to context2d()","create_time":"$D2022-01-16T15:16:54.705Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"a14813143d5f1551","reply_to_id":"41c684675bc314af","content":"For the record, none of these things fix the drawing behavior on my Linux FF machine. I guess it's one of those Canvas API inconsistencies that enables fingerprinting","create_time":"$D2022-01-16T15:46:08.170Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Canvas Madness","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":454,"value":"viewof renderOpts = Inputs.checkbox([\"amplify brightness (highlight anti-aliased dark grays)\", \"force software rendering\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"**Firefox offset-bug for canvases that aren't tiny.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":192,"value":"viewof canvasSize = Inputs.range([110, 130], {label: \"canvas dimensions\", value: 110, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"The slider above determines the width x height of canvases used to render the rectangles above. Try increasing the canvas size above 127 in Firefox. If you suddenly see a 0.5 pixel offset in both dimensions in the canvas above, that's due to this bug:\n\nhttps://bugzilla.mozilla.org/show_bug.cgi?id=1867194\n\nNote that it doesn't show up if software rendering is enforced!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":323,"value":"**Weird circle drawing issues.**\n\nIf you draw a filled circle immediately after a `beginPath()` call, you're (mostly) fine, although the circles still aren't always symmetrical when they really have no reason not to be. However, if you include *any* `ctx.lineTo()` or `ctx.moveTo()` call before or after trying to draw a tiny filled circle on Chrome, but before the `ctx.fill()` call, you get a asymmetric mess.\n\nOn Firefox there is an interaction with the aforementioned canvas size bug: if the canvas is smaller than 127 pixels, the arcs are less affected, although a very minor shift in pixel brightness can be seen you include a `moveTo()` call in some situations, but at least the circles are symmetrical. The arcs are again affected by the canvas size bug.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"viewof withMoveTo = Inputs.checkbox([\"moveTo() before arc call\", \"moveTo() after arc call\", \"force software rendering\", \"force opaque canvas\"], {label: \"circle issues\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"viewof canvasSize2 = Inputs.range([110, 140], {label: \"canvas dimensions\", value: 50, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"**Sub-pixel text rendering**\n\nIt turns out that disabling canvas opacity affects sub-pixel font-rendering!\n\nWe also iterate over the various [`textRendering`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textRendering) options and position letters as fractional coordinates to see if this affects rendering in anyway, but it seems to have no effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":865,"value":"viewof fontFamily = Inputs.text({label: \"font-family\", placeholder: \"sans-serif\", value: \"sans-serif\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":"viewof fontSize = Inputs.range([10, 20], {label: \"font size\", value: 16, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"viewof repeatedText = Inputs.text({label: \"first line\", placeholder: \"text\", value: \"text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"viewof repeatedText2 = Inputs.text({label: \"second line\", placeholder: \"t\", value: \"t\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"drawText(false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"drawText(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"fontString = `${fontSize}px sans-serif`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"function getCtx(w, h, contextType, opts) {\n if (!contextType) contextType = \"2d\";\n opts = Object.assign({\n alpha: true,\n colorSpace: \"srgb\",\n desynchronized: false,\n willReadFrequently: false\n }, opts);\n const id = (Math.random()*0x100000000 >>> 0).toString(32) + \n (Math.random()*0x100000000 >>> 0).toString(32) + \n (Math.random()*0x100000000 >>> 0).toString(32) + \n (Math.random()*0x100000000 >>> 0).toString(32);\n const canvas = htl.html`