p5.js and Picking a Library

p5.js 70,434 (github.com/processing/p5.js (https://github.com/processing/p5.js 24,057 ), npm 2,036 install p5, LGPL-2.1) is the JavaScript sibling of Processing 30,426 , the creative-coding language: you write setup() and draw(), and it supplies the canvas, the loop, input, color and math helpers, and a WebGL mode. Version 2.0 (April 2025) moved to async loading and a new shape API; 2.3.4 is current.

BookNest's ratings as a p5.js 2.3.4 sketchJavaScript

<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.min.js"></script>
<script src="booknest-data.js"></script>
<script>
  function setup() { createCanvas(600, 96);  noLoop();  noStroke();  textFont('Georgia'); }
  function draw() {
    BOOKS.forEach((book, i) => {
      const h = (book.rating - 4) * 80, x = 10 + i * 98;
      fill(book.color);  rect(x, 92 - h, 84, h, 4);
      fill('#263238');  text(book.rating, x + 32, 88 - h);
    });
    window.__done = true;
  }
</script>

Browser output of 26

Canvas libraries, September 2026
Library	Version (released)	License	Model	Best for
Fabric.js 696,666	7.4.0 (May 2026)	MIT	Interactive objects	Editors, annotation
Konva	10.7.0 (Sep 2026)	MIT	Scene graph, layers	Diagrams, games, apps
Paper.js 433,967	0.12.18 (Jul 2024)	MIT	Vector paths	Path editing, generative art
EaselJS 5,967	1.0.2 (Sep 2017)	MIT	Display list	Legacy games and ads
p5.js	2.3.4 (Sep 2026)	LGPL-2.1	Sketch loop	Creative coding, teaching

Use raw canvas for one custom visualization, Fabric.js when users edit objects, Konva for apps full of interactive shapes, p5.js for sketches, and a GPU library (WebGL and WebGPU) when canvas can't keep up.

A p5.js sketch: BookNest ratings as bars with setup() and draw()HTMLLive

<!doctype html>
<style>
  body { margin: 0; padding: 8px; font: 13px system-ui, sans-serif; background: #fafaf7; }
  main canvas { border: 1px solid #ddd; }
</style>
<script>
  // The sandboxed preview has no motion sensors: skip p5's device-motion listeners,
  // which would only log permission-policy warnings here.
  const addListener = window.addEventListener;
  window.addEventListener = function (type, ...rest) {
    if (type === 'devicemotion' || type === 'deviceorientation') return;
    return addListener.call(this, type, ...rest);
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.min.js"></script>
<p>Hover a bar to highlight it.</p>
<script>
  const BOOKS = [
    { title: 'Harbor', rating: 4.6, color: '#1f5f8b' }, { title: 'Deep Web', rating: 4.3, color: '#5b3f99' },
    { title: 'Saffron', rating: 4.8, color: '#e09a10' }, { title: 'Summits', rating: 4.1, color: '#3f7d3a' },
    { title: 'Clockmaker', rating: 4.5, color: '#b5452f' }, { title: 'Gardens', rating: 4.4, color: '#2a9d8f' }
  ];
  // p5 calls setup() once, then draw() every frame (global mode)
  function setup() {
    createCanvas(600, 200);
    noStroke();
    textFont('Georgia');
  }
  function draw() {
    background('#ffffff');
    BOOKS.forEach((book, i) => {
      const h = (book.rating - 4) * 150, x = 10 + i * 98, top = 170 - h;
      const over = mouseX > x && mouseX < x + 84 && mouseY > top && mouseY < 170;
      fill(book.color);
      rect(x, top, 84, h, 4);
      fill(over ? '#b5452f' : '#263238');
      textSize(over ? 16 : 13);
      textAlign(CENTER);
      text(book.rating, x + 42, top - 6);
      textSize(11);  fill('#555');
      text(book.title, x + 42, 188);
    });
  }
</script>

MENU