diff --git a/packages/core/pianoroll.mjs b/packages/core/pianoroll.mjs
index 254dd94a..413807f0 100644
--- a/packages/core/pianoroll.mjs
+++ b/packages/core/pianoroll.mjs
@@ -165,10 +165,7 @@ export function pianoroll({
   barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
   ctx.fillStyle = background;
   ctx.globalAlpha = 1; // reset!
-  if (!smear) {
-    ctx.clearRect(0, 0, w, h);
-    ctx.fillRect(0, 0, w, h);
-  }
+  clearScreen(smear);
   haps.forEach((event) => {
     const isActive = event.whole.begin <= time && event.endClipped > time;
     let strokeCurrent = stroke ?? (strokeActive && isActive);
@@ -282,3 +279,13 @@ export function drawPianoroll(options) {
   const { drawTime, ...rest } = options;
   pianoroll({ ...getDrawOptions(drawTime), ...rest });
 }
+
+function clearScreen(smear = 0, smearRGB = `0,0,0`) {
+  const ctx = getDrawContext();
+  if (!smear) {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  } else {
+    ctx.fillStyle = `rgba(${smearRGB},${1 - smear})`;
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  }
+}