Paper.js and EaselJS's Decline

Paper.js 433,967 (github.com/paperjs/paper.js (https://github.com/paperjs/paper.js 15,077 ), npm 2,036 install paper, MIT) is a vector toolkit: editable Bezier paths, smoothing, boolean operations (unite, subtract, intersect), hit testing and SVG import and export. It is still at 0.12.18 (July 2024) with no commits since: fine for generative art and path editing, a risk for a product that needs fixes.

EaselJS 5,967 , the display-list core of the CreateJS suite, brought Flash's stage, containers and sprite sheets to canvas and powered many HTML5 games and banner ads of the 2010s. Its last stable release, 1.0.2, dates from September 2017, a 2.0 beta stalled in November 2018, and apart from a few small commits development stopped in 2022 (github.com/CreateJS/EaselJS (https://github.com/CreateJS/EaselJS 8,157 )). Keep existing EaselJS code running if it works, but start new scene-graph work in Konva, or in PixiJS 313,967 (WebGPU) when you need a GPU renderer.

Activity timelines of Paper.js and EaselJS against Konva, drawn on a plain canvasHTMLLive

<!doctype html>
<style>
  body { margin: 0; padding: 8px; font: 13px system-ui, sans-serif; background: #fafaf7; }
  canvas { width: 600px; max-width: 100%; height: 250px; display: block; background: #fff; border: 1px solid #ddd; }
</style>
<canvas id="c"></canvas>
<p id="tip">Hover a marker for details.</p>
<script>
  function hidpi(c, r = devicePixelRatio) {
    c.width = c.clientWidth * r;  c.height = c.clientHeight * r;
    const ctx = c.getContext('2d');  ctx.scale(r, r);  return ctx;
  }
  const c = document.getElementById('c');
  const ctx = hidpi(c);
  const x = year => 110 + (year - 2011) * 30;            // 2011 → 110px … 2027 → 590px
  // Releases and milestones: [year, label]
  const libs = [
    { name: 'Paper.js', color: '#5b3f99', span: [2011.5, 2024.55], events: [[2011.5, 'first release'], [2024.55, '0.12.18, July 2024: last commit']] },
    { name: 'EaselJS', color: '#b5452f', span: [2011.9, 2022.5], events: [[2017.7, '1.0.2 stable, Sep 2017'], [2018.85, '2.0 beta stalls, Nov 2018'], [2022.5, 'last small commits, 2022']] },
    { name: 'Konva', color: '#3f7d3a', span: [2015.0, 2026.7], events: [[2026.7, '10.7.0, Sep 2026: active']] }
  ];
  const markers = [];

  function draw(hot) {
    ctx.clearRect(0, 0, 600, 250);
    ctx.font = '11px sans-serif';  ctx.textAlign = 'center';
    for (let y = 2011; y <= 2027; y += 2) {
      ctx.strokeStyle = '#eee';  ctx.beginPath();  ctx.moveTo(x(y), 30);  ctx.lineTo(x(y), 210);  ctx.stroke();
      ctx.fillStyle = '#555';  ctx.fillText(y, x(y), 228);
    }
    ctx.textAlign = 'left';
    libs.forEach((lib, i) => {
      const cy = 60 + i * 60;
      ctx.fillStyle = '#263238';  ctx.font = 'bold 13px sans-serif';  ctx.fillText(lib.name, 10, cy + 5);
      ctx.fillStyle = lib.color;  ctx.globalAlpha = 0.3;
      ctx.beginPath();  ctx.roundRect(x(lib.span[0]), cy - 7, x(lib.span[1]) - x(lib.span[0]), 14, 7);  ctx.fill();
      ctx.globalAlpha = 1;
      lib.events.forEach(([year, label]) => {
        ctx.beginPath();  ctx.arc(x(year), cy, hot && hot.label === label ? 9 : 6, 0, 2 * Math.PI);  ctx.fill();
        if (markers.length < 6) markers.push({ x: x(year), y: cy, label: `${lib.name}: ${label}` });
      });
    });
    ctx.fillStyle = '#263238';  ctx.font = '12px sans-serif';
    ctx.fillText('Bars: from first release to last commit', 110, 20);
  }
  c.addEventListener('pointermove', e => {
    const b = c.getBoundingClientRect(), px = e.clientX - b.left, py = e.clientY - b.top;
    const hot = markers.find(m => Math.hypot(m.x - px, m.y - py) < 10);
    document.getElementById('tip').textContent = hot ? hot.label : 'Hover a marker for details.';
    draw(hot && { label: hot.label.split(': ').slice(1).join(': ') });
  });
  draw();
</script>

MENU