31:T50a,md`# Canvas Cartography (NACIS 2019) _This notebook is the practical companion to my [NACIS 2019 presentation](http://axismaps.com/nacis2019) on desktop-like cartographic design tricks on web graphics, along with a similar notebook on [SVG cartography](https://observablehq.com/d/bc6a51b864a90bc9)._ This is not a full explanation of mapping with Canvas. The focus is on particular design techniques. You can copy and modify these examples to learn the techniques better, but you may prefer to do some outside reading if all of this is foreign to you. - [Intro to Observable](https://observablehq.com/@observablehq/user-manual). The main parts of the fortchoming code examples are ordinary JavaScript, but some bits are specific to making things work in this notebook environment. - D3 and [mapping with D3](https://www.d3indepth.com/geographic/). All the maps here use D3 to turn geographic data in screen pixels. D3 is complex and not at all explained here. There are many good resources to study, and D3 skill is very, very useful in web cartography! - [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial). Some basic Canvas techniques and concepts are glossed over below, so you may find an intro tutorial (at least the first parts of it) useful. `32:T515,md` ### Why use Canvas for web maps? At first drawing maps to Canvas is going to seem unnecessarily complicated and opaque if you're used to doing it with SVG. It's also not nearly as easy to make Canvas maps interactive with click events, etc. (It's far from impossible, but if your map is fairly simple and needs to be interactive, SVG may be the better choice.) That said, a couple good arguments for using Canvas are: - **Performance and compactness.** With SVG, everything you draw becomes a thing on the page. Draw enough things, and the web browser becomes bogged down. With Canvas, no matter how complex the artwork, the result is always just pixels which don't take up tons of resources. If you need to draw a thousand points, for example, Canvas is likely to perform better. Additionally, as you get adept with canvas map rendering techniques, your code can become pretty compact and efficient with everything done in neat loops and functions. (The opposite is also quite possible, however, and the rendering itself can get slow.) - **Design freedom.** With direct access to pixel manipulation, Canvas as a medium offers the freedom to draw in nearly any way you can imagine—as long as you can figure out how to code it. We'll see a bit of that later on in things like custom textures. `33:T47e,md`## Multiple fills and strokes Canvas drawing makes it relatively easy to do something like the Appearances panel in Illustrator and add multiple fills or strokes to the same shape, without having to copy the shape. The same basic technique for this also extends to the more complex examples ahead: 1. Call path drawing commands 2. Set a style 3. Apply fill or stroke 4. Go to step 2 and repeat with different settings as needed Syntax-wise, the steps look something like this: 1. \`ctx.beginPath()\` 2. Set styles such as \`ctx.fillStyle = 'red'\`, \`ctx.lineWidth = 2\` etc. 3. Path drawing commands like \`lineTo()\` or \`arc()\`—or in the case of maps here, D3 functions for generating the commands from GeoJSON 4. \`ctx.fill()\` and/or \`ctx.stroke()\` 5. Change any styles, call \`fill()\` or \`stroke()\` again, repeat ad nauseam. Until you begin a new path, fills and strokes will continue applying to the same shape. In the example map below, we'll draw three wide strokes on the states, after calling the path drawing commands only once. (After the fills are drawn on top of those, the result is a coastline with multiple strokes.) `34:T475,fancyStrokes = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); // fill the whole background with a water color ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); geoPath.context(ctx); // these styles are the same for all the next few strokes ctx.lineJoin = 'round'; // this is easy to forget, but is usually a good idea ctx.strokeStyle = waterGlowColor; ctx.beginPath(); // start the path states.forEach((state) => { geoPath(state); }); // draw all states // draw the stroke several times with different widths and colors ctx.strokeStyle = '#ccc'; ctx.lineWidth = 40; ctx.stroke(); ctx.strokeStyle = '#999'; ctx.lineWidth = 20; ctx.stroke(); ctx.strokeStyle = '#666'; ctx.lineWidth = 10; ctx.stroke(); // state fills states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // gray stroke ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.stroke(); return canvas; }35:T49f,coastalGlow = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); // fill the whole background with a water color ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); geoPath.context(ctx); // first we'll draw all the states in a single path, with the shadow/glow ctx.save(); // save() makes it handy to revert styles later ctx.fillStyle = 'white'; ctx.shadowColor = waterGlowColor; ctx.shadowBlur = 30; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.fill(); // we don't want shadows on anything after this // restore() undoes the style settings that followed save() above; easier than resetting them one by one! ctx.restore(); // now the normal fills states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // because all strokes are the same style, we can draw them all to one path ctx.strokeStyle = '#ccc'; ctx.beginPath(); // start the path states.forEach((state) => { geoPath(state); }); // draw all states ctx.stroke(); // stroke once, at the end return canvas; }36:T456,md`## \`drawImage()\` \`drawImage()\` is a method for drawing an image onto a canvas, just as it sounds. This might mean an actual image element, but it can also be another canvas in which you've drawn part of your graphic. Just as you would organize an Illustrator or Photoshop project in layers, with Canvas you may need to draw parts of your graphic into "layers" (i.e., their own canvases) before adding them to the final canvas with \`drawImage()\`. This becomes necessary especially if you're doing a lot of the masking and compositing described above, to ensure that the effects apply only to the things you want them to, and not the entire map. The method accepts a number of arguments for controlling the position and scale of the image being drawn, but most of the examples ahead use the simplest form of \`drawImage(image, x, y)\` and will look like \`ctx.drawImage(otherCanvas, 0, 0)\`. \`drawImage()\` in many ways is just like drawing any other content. In particular, take note that the \`globalCompositeOperation\` on the canvas onto which you're drawing will affect how the image is drawn.`37:T441,md`# Masking, clipping, and compositing Let's take a look at a couple of examples that make use of the compositing and masking/clipping operations described above. ## Masking for a coastal effect (pseudo vector operations) First, a map with several offset coastlines. We can achieve this by drawing a very wide stroke, clipping a slightly narrower stroke out of it, and repeating. If you've looked through my SVG cartography examples, you'll see that the concept is very much the same, but the output is significantly simpler. Instead of having multiple stroked paths (and the same number of masks), we only have the execute the path drawing commands once, then apply a series of styles. Step-by-step: 1. Draw a big wide stroke on the states. 2. In \`destination-out\` mode, draw a slightly narrower stroke to remove all but a thin outer edge. This achieves something like "offset path" in Illustrator. 3. Return to \`source-over\`, then repeat steps 1 and 2 with progressively smaller offset strokes. 4. Draw state fills on top. This also hides all the stroke bits that overlap land.`38:T7ed,offsetCoastLines = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); geoPath.context(ctx); // these styles are the same for all the next few strokes ctx.lineJoin = 'round'; ctx.strokeStyle = d3.color(waterGlowColor).darker(); ctx.beginPath(); // start the path states.forEach((state) => { geoPath(state); }); // draw all states // draw the offset coastlines. for each one, a big stroke... ctx.lineWidth = 40; ctx.stroke(); // ...followed by a slightly narrower stroke in destination-out mode // this clips out most of the fat stroke and leaves the appearance of a thin, offset stroke ctx.lineWidth = 38; ctx.globalCompositeOperation = 'destination-out'; ctx.stroke(); // // then reset to source-over and repeat ctx.globalCompositeOperation = 'source-over'; ctx.lineWidth = 20; ctx.stroke(); ctx.lineWidth = 18; ctx.globalCompositeOperation = 'destination-out'; ctx.stroke(); ctx.globalCompositeOperation = 'source-over'; ctx.lineWidth = 10; ctx.stroke(); ctx.lineWidth = 8; ctx.globalCompositeOperation = 'destination-out'; ctx.stroke(); ctx.globalCompositeOperation = 'source-over'; // the above is spelled out for demo purposes, but could be written quite neatly as a function and/or loop // state fills as usual. these will cover up the interior parts of the offset strokes states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // gray stroke ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.stroke(); // finally, we can use the 'destination-over' mode to draw the water background behind everything // (if we'd done this first, the coastline stuff would have clipped out pieces of the background) ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); return canvas; }39:Ta6b,innerGlow = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); geoPath.context(ctx); // let's start with an outer coastal glow, as long as we're feeling glowy ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); ctx.save(); ctx.fillStyle = 'white'; ctx.shadowColor = waterGlowColor; ctx.shadowBlur = 30; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.fill(); ctx.restore(); // we can draw the fills as usual, on the main canvas states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // now we draw each state stroke/glow states.forEach((state) => { // create a canvas for this state const stateCanvas = DOM.canvas(width, height); const stateCtx = stateCanvas.getContext('2d'); stateCtx.save(); // we'll need to revert a bunch of settings in a moment geoPath.context(stateCtx); // the geo path now needs to draw to this canvas /* Now some extra complication. Because a blur filter isn't widely supported by all browsers, to achieve the blurred stroke appearance we'll use a colored shadow instead. We can draw a stroke way off screen somewhere, but offset its shadow back to the normal place. */ // the size of the blur is a combination of this line width and the shadow blur // we don't see this line, but its size affects the shadow size stateCtx.lineWidth = 10; // stroke color doesn't matter because we don't even see it, only its shadow stateCtx.shadowColor = state.properties.strokeColor; stateCtx.shadowBlur = 15; // this moves the drawing somewhere off out of view stateCtx.setTransform(1, 0, 0, 1, -3000, -3000); // but offset the shadow back into place stateCtx.shadowOffsetX = 3000; stateCtx.shadowOffsetY = 3000; // draw the stroke stateCtx.beginPath(); geoPath(state); stateCtx.stroke(); // revert the shadow and transformation settings stateCtx.restore(); // now clip the blurred stroke/shadow to the state interior by drawing a fill in destination-in mode stateCtx.globalCompositeOperation = 'destination-in'; stateCtx.beginPath(); geoPath(state); stateCtx.fill(); // finally, draw this state canvas onto the main canvas ctx.drawImage(stateCanvas, 0, 0); }); // a stroke on top is helpful for clarity geoPath.context(ctx); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.stroke(); return canvas; }3a:T642,interiorBorders = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); geoPath.context(ctx); // we can draw the fills as usual, on the main canvas states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // now we draw each state states.forEach((state) => { // create a canvas for this state const stateCanvas = DOM.canvas(width, height); const stateCtx = stateCanvas.getContext('2d'); geoPath.context(stateCtx); // the geo path now needs to draw to this canvas stateCtx.lineWidth = 4; stateCtx.strokeStyle = '#999'; stateCtx.lineJoin = 'round'; // draw the stroke stateCtx.beginPath(); geoPath(state); stateCtx.stroke(); // in this case, we want only the exterior border, so destination-out mode stateCtx.globalCompositeOperation = 'destination-out'; stateCtx.beginPath(); geoPath(state); stateCtx.fill(); // finally, draw this state canvas onto the main canvas ctx.drawImage(stateCanvas, 0, 0); }); geoPath.context(ctx); // now clip to land area with destination-in. this removes the outer stroke along the coast ctx.globalCompositeOperation = 'destination-in'; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.fill(); // draw the water last, in destination-over mode so it goes below land ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); return canvas; }3b:T507,md`# Textures, patterns, and pixel manipulation Let's move on to a few final examples that get more artsy—it's a _canvas_ after all! The ability to paint on the canvas at pixel level is powerful, and useful for certain cartographic aesthetics. The intricacy of things like textures and patterns is up to you. Remember, unlike a vector format where each little detail probably means another element on the page, in the end you only have pixels here, so you're pretty free to spend as much effort designing tiny details as you like. You could literally set every pixel value if you wanted. ## Pattern fills Before going wild with hyper-localized pixel manipulation, let's take a look at something more repeatable: a pattern fill. Patterns aren't quite as simple as in SVG or desktop software—you can't simply specify a pattern for a "fill" attribute—but they're not too bad to implement. The tricky part can be designing the pattern, since you have to write it somewhat blindly in code, and may need to be aware of how the edges will match up. (Or you can make it much easier by using an actual image file you've designed elsewhere.) The forthcoming map examples use a hatch pattern along the coast. For that, the pattern is a pretty straightforward series of horizontal lines. `3c:T48a,hatchMap = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); geoPath.context(ctx); for (let x = 0; x < width; x += patternSize) { for (let y = 0; y < height; y += patternSize) { ctx.drawImage(pattern, x, y); } } ctx.lineJoin = 'round'; ctx.lineWidth = 40; ctx.globalCompositeOperation = 'destination-in'; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.stroke(); ctx.globalCompositeOperation = 'source-over'; // because each state has a different fill color, we need to draw each separately states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); // because all strokes are the same style, we can draw them all to one path ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1; ctx.beginPath(); // start the path states.forEach((state) => { geoPath(state); }); // draw all states ctx.stroke(); // stroke once, at the end ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); return canvas; }3d:T47f,md`## Texture The hatching is an old-timey style, but it doesn't exactly look hand-drawn, right? A beautiful thing about the raster format of Canvas is that you can get down to the pixel level to develop textures, add some random human-like touch, and otherwise give your map a little more life than the crisp, sterile look that plain code will draw. Let's start with the pattern itself as an example. A human hand, especially when using instruments without modern precision, is unlikely to draw such perfectly even, straight lines. For a more human look, we can use some random variation to mimic uneven pressure and line width. Here's the gist of it: 1. Copy the pattern image. 2. In \`destination-out\` mode, step through the image pixels and draw cells with random opacity, resulting in random faded bits of the lines, as though pen pressure varied when drawing. 3. Do the same thing with another copy of the pattern. 4. Lightly (i.e., with low opacity) draw the second pattern image onto the first, but down one pixel. The randomly faded lines of the second pattern, adjacent to those of the first, give some appearance of varied line width. `3e:T5c0,fancierMap = { const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); geoPath.context(ctx); ctx.lineJoin = 'round'; ctx.save(); ctx.lineWidth = 5; ctx.shadowColor = 'black'; ctx.shadowBlur = 30; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); // the shadow tends to look weak by default; stroking several times helps even out the fade from solid to transparent ctx.stroke(); ctx.stroke(); ctx.stroke(); ctx.stroke(); ctx.restore(); // fill another canvas with the pattern const patternCanvas = DOM.canvas(width, height); const patternCtx = patternCanvas.getContext('2d'); for (let x = 0; x < width; x += patternSize) { for (let y = 0; y < height; y += patternSize) { patternCtx.drawImage(patternWithGaps, x, y); } } // draw pattern canvas, keeping only the part overlapping the blurry coastline ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(patternCanvas, 0, 0); ctx.globalCompositeOperation = 'source-over'; states.forEach((state) => { ctx.fillStyle = state.properties.fillColor; ctx.beginPath(); geoPath(state); ctx.fill(); }); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 1; ctx.beginPath(); states.forEach((state) => { geoPath(state); }); ctx.stroke(); ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = waterColor; ctx.fillRect(0, 0, width, height); return canvas; }3f:T1f5c,fanciestMap = { // generate a canvas with simple random noise function getNoise(color = '#999', maxAlpha = .3) { const c = d3.color(color); const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); for (let x = 0; x < ctx.canvas.width; x += 2) { for (let y = 0; y < ctx.canvas.height; y += 2) { const a = Math.random() * maxAlpha; ctx.fillStyle = `rgba(${c.r}, ${c.g}, ${c.b}, ${a})`; ctx.fillRect(x, y, 2, 2); } } return ctx.canvas; } // a function for states path drawing since it will happen a lot function drawStates() { states.forEach((state) => { geoPath(state); }); } // the main map canvas const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); const waterFill = '#e8e0d3' const landFill = '#fff6e6'; ctx.lineJoin = 'round'; // fill water background ctx.fillStyle = waterFill; ctx.fillRect(0, 0, width, height); // draw a land background fill geoPath.context(ctx); ctx.fillStyle = landFill; ctx.beginPath(); drawStates(); ctx.fill(); /* State borders */ const borderCanvas = DOM.canvas(width, height); const borderCtx = borderCanvas.getContext('2d'); // subtle inner glows on each state borderCtx.globalAlpha = .15; states.forEach((state) => { const stateCanvas = DOM.canvas(width, height); const stateCtx = stateCanvas.getContext('2d'); stateCtx.save(); geoPath.context(stateCtx); stateCtx.lineWidth = 10; stateCtx.lineJoin = 'round'; stateCtx.shadowColor = state.properties.strokeColor; stateCtx.shadowBlur = 15; stateCtx.setTransform(1, 0, 0, 1, -3000, -3000); stateCtx.shadowOffsetX = 3000; stateCtx.shadowOffsetY = 3000; stateCtx.beginPath(); geoPath(state); stateCtx.stroke(); stateCtx.restore(); stateCtx.globalCompositeOperation = 'destination-in'; stateCtx.beginPath(); geoPath(state); stateCtx.fill(); borderCtx.drawImage(stateCanvas, 0, 0); }); // now a normal thin gray stroke borderCtx.lineWidth = 1; borderCtx.strokeStyle = 'rgba(150, 150, 150, .25)'; borderCtx.beginPath(); drawStates(); borderCtx.stroke(); // add a wider, noisier stroke on top, kind of pencil-like const bigBorderCanvas = DOM.canvas(width, height); const bigBorderCtx = bigBorderCanvas.getContext('2d'); // draw a wide-ish stroke bigBorderCtx.lineWidth = 3; bigBorderCtx.strokeStyle = 'rgba(150, 150, 150, 1)'; geoPath.context(bigBorderCtx); bigBorderCtx.beginPath(); drawStates(); bigBorderCtx.stroke(); // clip to interior. gets rid of excess stroke on the coast bigBorderCtx.globalCompositeOperation = 'destination-in'; bigBorderCtx.fill(); // now also use random noise to erase some bits, giving the uneven texture bigBorderCtx.drawImage(getNoise('#999', .5), 0, 0); // draw this second border onto the first borderCtx.globalAlpha = 1; borderCtx.globalCompositeOperation = 'source-over'; borderCtx.drawImage(bigBorderCanvas, 0, 0); // and draw the borders onto the main map ctx.drawImage(borderCtx.canvas, 0, 0); /* Coatal hatch pattern */ const coastCanvas = DOM.canvas(width, height); const coastCtx = coastCanvas.getContext('2d'); // first the shadow/blurred stroke effect coastCtx.strokeStyle = 'rgb(50, 50, 50)'; coastCtx.shadowColor = 'rgb(50, 50, 50)'; coastCtx.shadowBlur = 20; coastCtx.lineWidth = 5; coastCtx.lineJoin = 'round'; coastCtx.strokeStyle = 'rgba(50, 50, 50, .75)'; geoPath.context(coastCtx); coastCtx.beginPath(); drawStates(); // again, need to stroke this a number of times for the shadow to look more like an even fade coastCtx.stroke(); coastCtx.stroke(); coastCtx.stroke(); coastCtx.stroke(); coastCtx.stroke(); coastCtx.stroke(); // end result is a big, blurry gray stroke // now we'll erase some lines for the hatching look coastCtx.lineWidth = 1; coastCtx.globalCompositeOperation = 'destination-out'; coastCtx.filter = 'none'; coastCtx.strokeStyle = 'black'; coastCtx.beginPath(); // instead of straight horizontal lines, there will be some tiny random wobbling for (let y = 0.5; y <= height; y += 2) { coastCtx.moveTo(0, y); for (let x = 5; x <= width; x += 5) { const dy = .5 - Math.random(); coastCtx.lineTo(x, y + dy); } } coastCtx.stroke(); // now some more light erasing: dashed lines for "pressure" variation coastCtx.globalAlpha = .25; for (let y = 1.5; y <= height; y += 2) { coastCtx.beginPath(); coastCtx.setLineDash([Math.random() * 2, 5 + Math.random() * 5, Math.random() * 2, 5 + Math.random() * 5]); coastCtx.lineDashOffset = Math.random() * 10; coastCtx.moveTo(0, y); coastCtx.lineTo(width, y); coastCtx.stroke(); } // lastly, erase the states fill area so only the coastal pattern remains coastCtx.globalAlpha = 1; coastCtx.beginPath(); drawStates(); coastCtx.fill(); // draw the coast pattern onto the main map ctx.drawImage(coastCtx.canvas, 0, 0); // now the background "aged paper" texture const noiseCanvas = DOM.canvas(width, height); const noiseCtx = noiseCanvas.getContext('2d'); // draw perlin noise image noiseCtx.drawImage(perlinNoise, 0, 0); // colorize it noiseCtx.globalCompositeOperation = 'source-in'; noiseCtx.fillStyle = 'rgb(219, 202, 174)'; noiseCtx.fillRect(0, 0, width, height); // draw onto main map at 50% opacity in multiply mode ctx.globalCompositeOperation = 'multiply'; ctx.globalAlpha = .5; ctx.drawImage(noiseCanvas, 0, 0); /* Folded paper (creases), just for fun. Each crease is essentially a dark line with adjacent, wide, blurred random-looking dashed lines, with bonus random noise. It all combines for fairly ragged lines that look somewhat plausibly like rough paper creases. */ const foldCanvas = DOM.canvas(width, height); const foldCtx = foldCanvas.getContext('2d'); foldCtx.strokeStyle = 'rgba(0,0,0,.75)'; foldCtx.setLineDash([20,8,15,10,7,3]); foldCtx.lineWidth = 6; // multiply mode so some bits combine to be darker than others foldCtx.globalCompositeOperation = 'multiply'; foldCtx.save(); // the offset shadow trick foldCtx.shadowColor = 'rgba(0,0,0,.75)'; foldCtx.shadowBlur = 3; foldCtx.shadowOffsetX = 3000; foldCtx.shadowOffsetY = 3000; foldCtx.setTransform(1, 0, 0, 1, -3000, -3000); // horizontal and vertical creases stroke 1, offset by a few pixels foldCtx.beginPath(); foldCtx.moveTo(0, 3 + height * .75); foldCtx.lineTo(width, 3 + height * .75); foldCtx.moveTo(3 + width * .75, 0); foldCtx.lineTo(3 + width * .75, height); foldCtx.stroke(); // and stroke 2, offset by a few pixels in the opposite direction // and with a dash offset so the dashes don't match up with the first line foldCtx.lineDashOffset = 49; foldCtx.beginPath(); foldCtx.moveTo(0, height * .75 - 3); foldCtx.lineTo(width, height * .75 - 3); foldCtx.moveTo(-3 + width * .75, 0); foldCtx.lineTo(-3 + width * .75, height); foldCtx.stroke(); // now a narrower, non-dashed stroke down the middle of each crease foldCtx.lineWidth = 3; foldCtx.shadowBlur = 1; foldCtx.shadowColor = 'rgba(0,0,0,1)'; foldCtx.setLineDash([]); foldCtx.beginPath(); foldCtx.moveTo(0, height * .75); foldCtx.lineTo(width, height * .75); foldCtx.moveTo(width * .75, 0); foldCtx.lineTo(width * .75, height); foldCtx.stroke(); foldCtx.restore(); // erase some random noise foldCtx.globalCompositeOperation = 'source-in'; foldCtx.drawImage(getNoise('black'), 0, 0); // draw the creases to the main map ctx.globalAlpha = .3; ctx.globalCompositeOperation = 'multiply'; ctx.drawImage(foldCanvas, 0, 0); // FINALLY, a bit more random noise on the main canvas, just for additional texture ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = .3; ctx.drawImage(getNoise('#ccc'), 0, 0); return canvas; }40:Tbcf,{ const canvas = DOM.canvas(width, height); const ctx = canvas.getContext('2d'); // this is a way to use SVG path strings to draw on canvas. the string is in the cell below this one // later, we can call things like ctx.stroke(p) to draw a stroke on this path const p = new Path2D(pathString); const lineWidth = 48; // the main, big line width const lineDash = [30, 15]; // ctx1: the blue, inner stroke const canvas1 = DOM.canvas(width, height); const ctx1 = canvas1.getContext('2d'); ctx1.strokeStyle = '#0069a4'; ctx1.fillStyle = 'black'; ctx1.setLineDash(lineDash); ctx1.lineWidth = lineWidth * 2; ctx1.stroke(p); ctx1.save(); ctx1.globalCompositeOperation = 'destination-in'; ctx1.fill(p); ctx1.restore(); // ctx2: the gray, outer stroke const canvas2 = DOM.canvas(width, height); const ctx2 = canvas2.getContext('2d'); ctx2.strokeStyle = '#999'; ctx2.setLineDash(lineDash); ctx2.lineWidth = lineWidth / 6; ctx2.stroke(p); ctx2.save(); ctx2.fillStyle = 'black'; ctx2.globalCompositeOperation = 'destination-in'; ctx2.fill(p); ctx2.restore(); ctx1.drawImage(ctx2.canvas, 0, 0); // ctx3: the slice that's cut out in between the gray and blue strokes const canvas3 = DOM.canvas(width, height); const ctx3 = canvas3.getContext('2d'); ctx3.strokeStyle = 'black'; ctx3.lineWidth = lineWidth / 6 + 2; ctx3.stroke(p); ctx3.save(); ctx3.lineWidth = lineWidth / 6 - 2; ctx3.globalCompositeOperation = 'destination-out'; ctx3.stroke(p); ctx3.restore(); ctx3.save(); ctx3.fillStyle = 'black'; ctx3.globalCompositeOperation = 'destination-in'; ctx3.fill(p); ctx3.restore(); ctx1.save(); ctx1.globalCompositeOperation = 'destination-out'; ctx1.drawImage(ctx3.canvas, 0, 0); ctx1.restore(); // ctx4: a smaller version of the shape, which will be blurred and used for fading the blue stroke const canvas4 = DOM.canvas(width, height); const ctx4 = canvas4.getContext('2d'); ctx4.strokeStyle = 'black'; ctx4.fillStyle = 'black'; ctx4.lineWidth = lineWidth; ctx4.fill(p); ctx4.globalCompositeOperation = 'destination-out'; ctx4.stroke(p); // use the above shape with a blur (shadow) to clip out the blue stroke in a nice gradient ctx1.shadowColor = 'black'; ctx1.globalCompositeOperation = 'destination-out'; // draw the shape a number of times with progressively smaller shadows to get a decently even gradient around it ctx1.shadowBlur = lineWidth; ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.shadowBlur = lineWidth / 2; ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.shadowBlur = lineWidth / 4; ctx1.drawImage(ctx4.canvas, 0, 0); ctx1.drawImage(ctx4.canvas, 0, 0); // draw the background and the graphic on the main canvas! ctx.fillStyle = '#d8eaf1'; ctx.fillRect(0, 0, width, height); ctx.drawImage(ctx1.canvas, 0, 0); return canvas; }41:[] 2f:{"title":"Canvas Cartography (NACIS 2019)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md` ### Drawing a map with Canvas\n\nA Canvas map has no structure to speak of: it's only pixels in the end. You can't inspect it to see how it's made, unless the cartographer has made the source code available. You can feel a bit blind when drawing the map, but don't worry, you'll get the hang of it.\n\nBelow is a typical, basic way to draw some GeoJSON to Canvas. At the bottom of this notebook, some state features have been imported. We use a D3 map projection and path generator to translate GeoJSON data into Canvas path drawing commands.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"basicMap = {\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext('2d');\n \n geoPath.context(ctx);\n \n // because each state has a different fill color, we need to draw each separately\n states.forEach((state) => {\n ctx.fillStyle = state.properties.fillColor;\n ctx.beginPath();\n geoPath(state);\n ctx.fill();\n });\n \n // because all strokes are the same style, we can draw them all to one path\n ctx.strokeStyle = '#ccc';\n ctx.beginPath(); // start the path\n states.forEach((state) => { geoPath(state); }); // draw all states\n ctx.stroke(); // stroke once, at the end\n \n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`## Glows and shadows\n\nOuter glows and shadows are easy with Canvas, as it has built-in shadow style properties. All you need to do is set these and draw your shapes as usual. So, for example, we can add subtle outer glow on the coastline as below. For _inner_ glows we'd need to do some masking, which we'll see a bit later.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`# Methods to know\n\nBefore we move on to more map examples, it's worth introducing two technical methods that are important in assembling advanced cartographic effects. Both are useful for building up graphics piece by piece: one for controlling compositing and masking, and the other for isolating things into layers.\n\n## \\`globalCompositeOperation\\`\n\nThe \\`globalCompositeOperation\\` property figures heavily into more advanced cartographic examples. This property controls how new content (the \"source\") interacts with existing content on the canvas (the \"destination\")—or doesn't. It covers both blending mode and clipping/masking operations.\n\nMany interesting effects are achieved by repeatedly drawing content, while changing this property in between. Before we get to those, here are a handful of examples of different \\`globalCompositeOperation\\` settings. The default is \\`source-over\\`, in which the new content (here, the blue circle) simply goes on top of the existing content (the red square).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"compositeExample('source-over')","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`Some settings are for blending modes, useful for overlaying content.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"compositeExample('multiply')","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"compositeExample('hard-light')","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`Many other settings are useful for different ways of clipping the new and/or existing content. These operations are useful in cartography for approximating vector some operations: merging shapes, cutting out holes, making buffers, and so on.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"compositeExample('destination-in')","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"compositeExample('destination-out')","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"compositeExample('destination-over')","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"compositeExample('source-in')","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"compositeExample('source-out')","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`While Canvas has an actual [clipping path](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths) capability, the following examples prefer to use the composite operations instead since they force a bit more step-by-step thinking, and because many of the examples are actually opacity masking, which the composite operations support better.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`## Masking and layering \n\nIn this example we'll do inner glows (teased a little earlier), which require a more complicated process. An outer glow is as simple as setting shadow styles, but an inner one needs to be clipped to the interior of each state. As with SVG, we achieve the inner glow by drawing a wide, blurred stroke, then removing the portion of it that falls outside the state.\n\nBut if we drew each state on the canvas as in previous examples, and tried to do the clipping operation, we'd end up clipping out everything else that's on the canvas, too. Instead, we'll draw each state (with the clipping it needs) to its own canvas, then draw that canvas onto the final map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Masking, layering, and vector-ish operation\n\nOne more example which tries to get excessively clever with masking. A nice cartographic touch is to include strokes only along interior borders, and skip them along coastlines. But say all you have is a GeoJSON file with 50 states—you can either draw strokes around the whole outside of each state (coastline included) or not at all, right? Nope!\n\nThis example isn't the most realistically practical, as you'd probably be better off finding or generating interior line data instead, but it's nevertheless a decent way to show the tricks you can do with masking. This is like the inverse of the glow example: here, we want to retain the piece of stroke around the _outside_ of each state. This way, along the coast the stroke does not overlap any land (and we can easily remove it at the end), while in the interior each state's stroke overlaps its neighbor a bit, all coming together to look like normal borders.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"patternSize = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"pattern = {\n const canvas = DOM.canvas(patternSize, patternSize);\n const ctx = canvas.getContext('2d');\n \n ctx.strokeStyle = '#333';\n ctx.lineWidth = 1;\n \n ctx.beginPath();\n for (let i = 0.5; i < patternSize; i += 5){\n ctx.moveTo(0, i);\n ctx.lineTo(patternSize, i);\n }\n ctx.stroke();\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`To display this pattern along the coast, we'll use some masking and layering techniques that hopefully are looking familiar by now:\n\n1. Fill an entire canvas with the pattern. (Here, a series of \\`drawImage()\\` to tile the small pattern image; alternatively you could just draw the pattern at a full-canvas size in the first place.)\n2. Mask the pattern by a wide stroke along the coast.\n3. Draw fills, etc. on top.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"patternWithGaps = {\n const canvas = DOM.canvas(patternSize, patternSize);\n const ctx = canvas.getContext('2d');\n \n ctx.drawImage(pattern, 0, 0);\n ctx.globalCompositeOperation = 'destination-out';\n for (let x = 0; x < patternSize; x += 2){\n for (let y = 0; y < patternSize; y += 2){\n ctx.fillStyle = `rgba(255, 0, 0, ${.6 * Math.random()})`;\n ctx.fillRect(x, y, 2, 2);\n }\n }\n \n ctx.globalCompositeOperation = 'source-over';\n \n const overlayPatternCanvas = DOM.canvas(patternSize, patternSize);\n const overlayPatternCtx = overlayPatternCanvas.getContext('2d');\n \n overlayPatternCtx.drawImage(pattern, 0, 0);\n overlayPatternCtx.globalCompositeOperation = 'destination-out';\n for (let x = 0; x < patternSize; x += 2){\n for (let y = 0; y < patternSize; y += 2){\n overlayPatternCtx.fillStyle = `rgba(255, 0, 0, ${1 * Math.random()})`;\n overlayPatternCtx.fillRect(x, y, 2, 2);\n }\n }\n \n ctx.globalAlpha = .2;\n ctx.drawImage(overlayPatternCanvas, 0, 1);\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`For a bit more nuance in the map, instead of masking the pattern by a big stroke, we can use a blurred shadow so that the pattern fades out farther from shore.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`## The human touch\n\nTo round out this theme, there will be one more map example that goes all out on the hand-drawn/antique aesthetic, and combines most of the pattern and compositing techniques described above. Before getting to that, there's one more piece that hasn't yet been mentioned: Perlin noise. Perlin noise is a type of random-ish image noise intended to look more natural and less \"machine-like,\" and it's more or less what you get from Photoshop's \"clouds\" filter or some of SVG's \\`feTurbulence\\` options. Here's a Perlin noise image (copied from Mike Bostock's [example](https://observablehq.com/@mbostock/perlin-noise)) that will be used in the forthcoming map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"perlinNoise = {\n const context = DOM.context2d(width, height, 1);\n const image = context.createImageData(width, height);\n const noise = octave(perlin2, 5);\n for (let z = 0, y = 0, i = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x, i += 4) {\n image.data[i + 3] = (noise(x / 64, y / 64) + 1) * 128;\n }\n }\n context.putImageData(image, 0, 0);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`This kind of noise is broadly useful for textures if you're going for a certain look—the map below will use it mostly for a kind of aged paper effect. But it's surprisingly useful in other ways if you get especially clever. For example, Stamen's famous watercolor map style involves a process using Perlin noise to alter the look of vectory geometry.\n\nAnyway, here's the final map. I won't get into the steps in detail—there are a few comments in the code and it's mostly a matter of doing things previously described—but I think it's worth just looking at the map and getting a taste for how far you can go with map design on Canvas, starting from a humble GeoJSON file. (It's also, however, an example of pushing some limits, as you may notice it taking a few seconds to render.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`# Huffmania\n\nWhen we're talking about subtle-yet-complex cartographic effects, [Daniel Huffman](https://somethingaboutmaps.com/) is a good person to emulate. So here are just a few miscellaneous examples that copy some of their Illustrator tips, but with Canvas. I won't explain them in detail, since again the techniques are basically the same as what's already been covered here, but perhaps they help give you some ideas for taking your web maps to the next level.\n\n## A border with complex appearances\nMore or less duplicating a border effect in Daniel's [Power of Appearances](https://somethingaboutmaps.wordpress.com/2017/01/23/the-power-of-appearances/) tutorial.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"pathString = 'M111.4,246.9c19.8-27.9,50.4-49.7,84.5-51.9c24.4-1.5,48.1,6.9,71.9,12.1c45.2,9.9,92.9,8.3,137.3-4.6 c83.4-24.3,153.8-86.9,239.7-99.7c52.3-7.8,107,4.3,152.2,31.6s81,69.6,102.4,117.9c13.6,30.6,21.6,64.4,17.4,97.6 c-4.8,38.1-25.3,72.6-50,101.9c-57.8,68.7-141.8,114.9-230.8,126.8c-83.8,11.2-168.6-6.9-250.2-28.7 c-42.7-11.4-87.4-23.9-130.4-13.6c-17.7,4.2-34.8,12.3-52.9,11.7c-16-0.5-31-7.8-44.3-16.5C124.1,509.3,98,475.8,83,438.1 c-15.9-40.2-16.5-76.2-4.8-116.8C85.8,295.1,95.4,269.3,111.4,246.9z'","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md`## Text knockouts\n\nThe example below is copied from [another notebook](https://observablehq.com/@awoodruff/text-knockouts-in-canvas); see the code there if you like. It's just another example of applying masking to the right layer(s), but a reminder that most of this stuff is good for text, too! This one partially copies a map from Daniel Huffman's guides to [type knockouts](https://somethingaboutmaps.wordpress.com/2015/05/08/type-knockouts-in-illustrator/) and [fancier type knockouts](https://somethingaboutmaps.wordpress.com/2016/12/05/even-fancier-type-knockouts-in-illustrator/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"textKnockout","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"import { textKnockout } from '@awoodruff/text-knockouts-in-canvas'","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`## Next: SVG cartography\n\nSee how some [similar design effects are done with SVG](https://observablehq.com/d/bc6a51b864a90bc9).\n\n---\n\n### More code\n\nBelow are some imported libraries and some variables that are used in the examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"compositeExample = (operation = 'source-over') => {\n const canvas = DOM.canvas(width, 200);\n const ctx = canvas.getContext('2d');\n \n ctx.fillStyle = '#fcc';\n ctx.fillRect(0, 0, 100, 100);\n \n ctx.fillStyle = '#ccf';\n ctx.globalCompositeOperation = operation;\n ctx.beginPath();\n ctx.arc(100, 100, 50, 0, 2 * Math.PI);\n ctx.fill();\n \n ctx.globalCompositeOperation = 'source-over';\n ctx.font = '14px monospace';\n ctx.fillStyle = 'black';\n ctx.fillText(`ctx.globalCompositeOperation = '${operation}'`, 125, 25);\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"waterColor = '#EAF1F2'","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"waterGlowColor = '#a4d5db'","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"landColor = '#fff6e6'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"geoPath = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"projection = d3.geoEqualEarth()\n .translate([width/2, height/2])\n .rotate([70.9, 0])\n .center([0, 42.361445])\n .scale(13000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"states = d3.json('https://gist.githubusercontent.com/awoodruff/c58d270da0a1e925e7ba3ff629fdfed7/raw/d8bd17698e65b901dc124a08252c7bce4f8a9fcb/states.geojson').then(json => json.features.map((d, i) => {\n // assign a color value to each state\n d.properties = Object.assign(d.properties, {strokeColor: mapColors[i], fillColor: lighter(mapColors[i])});\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"lighter = (color) => {\n const c = d3.color(color);\n c.r = 255 - (255 - c.r) * .25;\n c.g = 255 - (255 - c.g) * .25;\n c.b = 255 - (255 - c.b) * .25;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapColors = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#a65628','#f781bf','#ff7f00','#f781bf','#999999']","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"import { octave, perlin2 } from '@mbostock/perlin-noise'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W41","stdlib":"1","titling":"auto"}