otsukare Thoughts after a day of work

Progressive enhancement for a Canvas demo.

"The Wild Path. An Icelandic Adventure. An interactive storytelling experiment with Canvas." is a beautiful demo. We need more demos like this one.

The map trace is synchronized with the text on the screen. The map is defined as SVG but controlled by canvas.

<div class="container">
    <canvas style="position: absolute; top: 0px; left: 0px;" height="549" width="817"></canvas>
</div>

with:

    this.canvas = (0, h.default) (e, i), this.canvas.style.position = 'absolute', this.canvas.style.top = 0, this.canvas.style.left = 0, this.ctx = this.canvas.getContext('2d', {
      alpha: !1
    }), this.ctx.fillStyle = '#fff', this.ctx.fillRect(0, 0, this.state.width, this.state.height), this.container.appendChild(this.canvas), this.calculateSections(), Array.from(this.props.textContainer.querySelectorAll('img')).forEach(function (e) {
      e.addEventListener('load', function (e) {
        t.calculateSections(),
        t.renderMap()
      })
    })

Images have a load event, triggering these functions.

function(e) {
  t.calculateSections(), t.renderMap()
}

Some sections have an associated zoom given through a data- attribute, aka private to the page. Perfect usage of data-.

<section class="js-section" data-zoom-middle="2">

and also a data-pos

<figure>
    <img class="js-image" data-pos="0.25" src="img/journey/9.jpg">
    <figcaption>All things come to an end, and so did our journey when we reached the end of the main street in Reykjavik</figcaption>
</figure>

[…]

<figure>
    <img class="js-image" data-pos="0.6" src="img/journey/5.jpg">
    <figcaption>I was the geographer, whose mission it was to make a map of a small portion of the country traversed.</figcaption>
</figure>

All of that is simple. The code is a nice read.

But the best part of it comes from just reading without CSS and JS. We still get a readable text. And it's rare enough these days, that it has to be praised on the tone, yes it's possible.

Icelandic age with and without interactivity

One nitpick: The lack of spaces in between some words.

Otsukare!