2d:null 2e:["$","title",null,{"children":"Canvas Picking With A Hidden Canvas | Chris Camargo | Observable"}] 33:T5f4,function draw(mouseEvent = {}) { const hiddenCanvasColor = rgbColorGenerator(); const colorToPoint = {}; const { offsetX = null, offsetY = null } = mouseEvent; context.clearRect(0, 0, width, height); hiddenContext.clearRect(0, 0, width, height); hiddenContextSelection.clearRect(0, 0, width, height); points.forEach(point => { // Define point geometry we will render to both the canvas and hidden canvas. const circle = new Path2D(); circle.arc(point.x, point.y, 10, 0, 2 * Math.PI); // Render to the hidden canvas and map a hidden canvas color to a point. // This is where the magic happens. const color = hiddenCanvasColor.next().value; colorToPoint[color] = point; hiddenContext.fillStyle = color; hiddenContext.fill(circle); // Render to the hidden selection canvas so we can display how the hidden canvas picking happens. // This is just for demonstration purposes. hiddenContextSelection.fillStyle = color; hiddenContextSelection.fill(circle); // If a mouse event is given, draw the hidden canvas mouse selection point. // This is just for demonstration purposes. if (offsetX && offsetY) { const circle = new Path2D(); circle.arc(offsetX, offsetY, 5, 0, 2 * Math.PI); hiddenContextSelection.fillStyle = '#4bf442'; hiddenContextSelection.fill(circle); } // Render to the regular canvas. context.fillStyle = point.color; context.fill(circle); }); return colorToPoint; }34:[] 31:{"id":"7ce48c03cab865d5","slug":"canvas-picking-with-a-hidden-canvas","title":"Canvas Picking With A Hidden Canvas","thumbnail":"df658fc44e97c383c347f35246a37d35e3492fa5ad12381e0dc32e56265b18b1","access_level":"public","create_time":"$D2019-05-08T02:08:19.039Z","update_time":"$D2020-02-05T22:59:43.877Z","view_time":null,"first_public_time":"$D2019-05-12T18:36:25.191Z","fork":false,"stars":39,"starred":false,"owner":{"type":"team","id":"48d233b7a3d2901d","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":"starter_2024"},"version":544,"publish_version":544,"role":null,"authored":false,"authors":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null}],"members":[{"type":"individual","id":"af04b88bb8b24360","login":"camargo","name":"Chris Camargo","avatar_url":"https://avatars-next.observableusercontent.com/4fc433a1de8ba3e5fcf6deb2b6faed921fa37f257dbd3f87becdb8959d071034","tier":null,"role":"editor"}],"comments":[{"id":"6dd5953d13f87a3c","reply_to_id":null,"content":"This notebook was super useful, thank you! One note: another color generation strategy, if your data is in an array that won't be shuffled during runtime, is to simply use the index of the datum to generate a color. Then you don't need a lookup table, and you can easily derive the datum using the color in isolation. This worked better for my context.","create_time":"$D2023-11-12T20:05:10.728Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"cd1e7381399c13b3","login":"davidnmora","name":"David Mora","avatar_url":"https://avatars-next.observableusercontent.com/05e764a7aea9b9b56f7aeb269af5ff1f9e1b461105f5f05fd7bd2e42e84bb04a","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Canvas Picking With A Hidden Canvas","cells":[{"id":0,"value":"md`# Canvas Picking With A Hidden Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`This notebook demonstrates how to do pointer-based geometry selection (aka picking) using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). Specifically this technique uses an off-screen color buffer (typically called a hidden canvas or color mask) to build a map of unique [RGB](https://en.wikipedia.org/wiki/RGB_color_model) color values from a hidden canvas to points on a visible canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`## Visible Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof canvas = context.canvas;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`## Hidden Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof hiddenCanvasSelection = hiddenContextSelection.canvas;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`The first thing we need is a way to generate unique RGB tripples. I've adapted [this code](https://stackoverflow.com/questions/15804149/rgb-color-permutation/15804183#15804183) into a [generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) that gives us a new RGB tripple with each call to next().`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function* rgbColorGenerator() {\n let nextColor = 1;\n const nextColorStep = 50;\n\n while (nextColor < 16777216) {\n const rgb = [];\n\n rgb.push(nextColor & 0xff); // R.\n rgb.push((nextColor & 0xff00) >> 8); // G.\n rgb.push((nextColor & 0xff0000) >> 16); // B.\n\n nextColor += nextColorStep;\n yield `rgb(${rgb.join(',')})`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"md`The increment by 50 to nextColor is interesting. This creates \"color gap\" where subsequent colors are not right next to each other numerically in the map. The 50 is somewhat arbitrary. For example instead of subsequent colors in the map being rgb(1, 0, 0) and rgb(2, 0, 0), they would instead be rgb(1, 0, 0) and rgb(51, 0, 0). If we increment by just 1, then [getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) can generate color collisions because the canvas implementation draws slightly different colors than the given [fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) at a rounded shapes boundary, which is due to anti-aliasing. You can demonstrate this yourself by setting nextColorStep to 1 and moving your mouse along on a points edge in the Visible Canvas above. You will see more than one point being selected due to a collision.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`\n

\"Arc — Arc Anti-aliasing - Note the different shades of red at the circles boundry. The center pixels of the circle are rgb(137, 29, 16), and some pixels on the left-center of the circle are rgb(138, 29, 16).

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`Another more involved technique for solving this anti-aliasing problem is to leverage [custom line-drawing functions](http://members.chello.at/easyfilter/bresenham.js) that [set raw pixel values](http://members.chello.at/easyfilter/canvas.html) and don't do any anti-aliasing. You would only use these functions on the hidden canvas context. This way you could set nextColorStep to 1 and not worry about color collisions because all geometry would have a single unique color.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"md`Next we draw on both the visible and hidden canvases. Note that for this demonstration we are using a third selection canvas so we can show the picking selection without poluting the hidden canvas colors.\n\nThe magic behind this technique is relatively simple. For each point p we draw in the visible canvas, we generate a next() RGB tripple c and assign to a map colorToPoint[c] = p. We then draw p in the color c on the hidden canvas as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"colorToPoint = {\n return draw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`Finally when we interact with the visible canvas and get a mouse position m on it, we use [getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData) at m to get a pixel color c against the hidden canvas. This is visualized with the green selection point in the Hidden Canvas above. We then use c to as a key to colorToPoint[c], which will produce a point p if m is intersecting that point in the visible canvas. In this demonstration we show a tooltip over p in the visible canvas if there is an intersestion.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"mousemove = { \n return d3.select(context.canvas).on('mousemove', () => {\n const mouseEvent = d3.event;\n const { offsetX, offsetY } = mouseEvent;\n const { data } = hiddenContext.getImageData(offsetX, offsetY, 1, 1);\n const colorKey = `rgb(${data[0]},${data[1]},${data[2]})`;\n const point = colorToPoint[colorKey];\n\n draw(mouseEvent);\n\n if (point) {\n showTooltip(point);\n } else {\n hideTooltip();\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"mouseout = {\n return d3.select(context.canvas).on('mouseout', () => {\n draw();\n hideTooltip();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"tooltip = {\n return d3.select('body')\n .append('div')\n .attr('class', 'canvas-tooltip')\n .style('background-color', '#fff')\n .style('border', '1px solid #999')\n .style('border-radius', '3px')\n .style(\n 'box-shadow',\n '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',\n )\n .style('opacity', 0)\n .style('padding', '10px')\n .style('position', 'absolute')\n .style('pointer-events', 'none')\n .style('z-index', 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"function showTooltip(point) {\n d3.select('.canvas-tooltip')\n .style('opacity', 0.9)\n .style('top', d3.event.pageY + 'px')\n .style('left', d3.event.pageX + 'px')\n .style('z-index', 1)\n .html(`\n

\n X: ${point.x}\n
\n Y: ${point.y}\n

\n `);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"function hideTooltip() {\n d3.select('.canvas-tooltip')\n .style('opacity', 0)\n .style('z-index', -1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"height = 200;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"n = 100;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"context = {\n const context = DOM.context2d(width, height);\n context.canvas.width = width;\n context.canvas.height = height;\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"hiddenContext = {\n const hiddenContext = DOM.context2d(width, height);\n hiddenContext.canvas.width = width;\n hiddenContext.canvas.height = height;\n return hiddenContext;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"hiddenContextSelection = {\n const hiddenContextSelection = DOM.context2d(width, height);\n hiddenContextSelection.canvas.width = width;\n hiddenContextSelection.canvas.height = height;\n return hiddenContextSelection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// Generate n random points for the canvas and give each a random color.\npoints = {\n const xStep = Math.floor(width / n);\n return [...Array(n).keys()].map((_, i) => {\n const x = xStep * i;\n return {\n color: '#538eed',\n x,\n y: Math.floor(height * Math.random(x)),\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"