Canvas, SVG & localStorage

canvas — pixels via script

<canvas> is a blank drawing surface — everything on it is drawn with JavaScript, pixel by pixel. Great for games and charts.

SVG — shapes as markup

<svg> describes shapes as XML tags (<circle>, <path>) instead of pixels — they scale perfectly at any size.

localStorage — browser storage

A small key-value store built into every browser that persists even after the tab closes — no server needed.

A quick look

All three live inside plain HTML, driven by a little script.

<canvas id="c" width="100" height="100"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>
<script>
  localStorage.setItem('theme', 'dark');
  console.log(localStorage.getItem('theme')); // "dark"
</script>