30: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 screen31: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; }32: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; }33: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; };34:[] 2e:{"title":"Canvas Madness","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"viewof renderOpts = Inputs.checkbox([\"amplify brightness (highlight anti-aliased dark grays)\", \"force software rendering\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"**Firefox offset-bug for canvases that aren't tiny.**","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"viewof canvasSize = Inputs.range([110, 130], {label: \"canvas dimensions\", value: 110, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":587,"value":"viewof canvasSize2 = Inputs.range([110, 140], {label: \"canvas dimensions\", value: 50, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":865,"value":"viewof fontFamily = Inputs.text({label: \"font-family\", placeholder: \"sans-serif\", value: \"sans-serif\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"viewof fontSize = Inputs.range([10, 20], {label: \"font size\", value: 16, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"viewof repeatedText = Inputs.text({label: \"first line\", placeholder: \"text\", value: \"text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"viewof repeatedText2 = Inputs.text({label: \"second line\", placeholder: \"t\", value: \"t\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"drawText(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"drawText(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"fontString = `${fontSize}px sans-serif`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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`