Skip to content

URLs

Client-side URLs

Every client-side state that need to persist between reloads should be stored in the hash of the url

Firefox at least limits the amount of times you can update the history, so it should be done every 500ms to avoid timeouts

  • position (x, y, zoom)
  • template (url, x, y, width, height, opacity?)

Share URLs

  • Share URLs should use paths to allow for SSR of metadata (eg canvas.domain/share/[...])
  • Should avoid obscuring information too much in the share URLs for longevity (and to support tools in the future)
  • When share URLs are loaded, redirect to the hash variant of the URL
  • Template data is added to the URL using query parameters, with the image URL being shorted to an identifier instead (to avoid massive URLs)

SSR Metadata

  • Generate images of the rough area that's being shared
  • If a template is provided, render at half opacity on top of canvas
  • Meta title: Canvas @ \({x}, {y}\) (with Template)?
  • Meta description:
    • Template: Help build with me on Canvas
    • No Template: A collaborative pixel canvas

Examples

  • Location on canvas: canvas.domain/share/{x},{y}
  • Location on the canvas (with zoom): canvas.domain/share/{x},{y}/z={zoom} (eg. canvas.domain/share/50,25/z=5 for (50, 25) @ 5 zoom)
  • Location w/ template: canvas.domain/share/{x},{y}/z={zoom}?template={identifier}&x={tx}&y={ty}&w={tw}&h={th} (eg. canvas.domain/share/10,10/z=5?template=ABC123&x=5&y=5&w=10&h=10)