diff --git a/packages/draw/draw.mjs b/packages/draw/draw.mjs
index 898b0a66..b23b5909 100644
--- a/packages/draw/draw.mjs
+++ b/packages/draw/draw.mjs
@@ -39,41 +39,9 @@ function stopAnimationFrame(id) {
 function stopAllAnimations() {
   Object.keys(animationFrames).forEach((id) => stopAnimationFrame(id));
 }
-Pattern.prototype.draw = function (callback, { id = 'std', from, to, onQuery, ctx } = {}) {
-  if (typeof window === 'undefined') {
-    return this;
-  }
-  stopAnimationFrame(id);
-  ctx = ctx || getDrawContext();
-  let cycle,
-    events = [];
-  const animate = (time) => {
-    const t = getTime();
-    if (from !== undefined && to !== undefined) {
-      const currentCycle = Math.floor(t);
-      if (cycle !== currentCycle) {
-        cycle = currentCycle;
-        const begin = currentCycle + from;
-        const end = currentCycle + to;
-        setTimeout(() => {
-          events = this.query(new State(new TimeSpan(begin, end)))
-            .filter(Boolean)
-            .filter((event) => event.part.begin.equals(event.whole.begin));
-          onQuery?.(events);
-        }, 0);
-      }
-    }
-    callback(ctx, events, t, time);
-    animationFrames[id] = requestAnimationFrame(animate);
-  };
-  requestAnimationFrame(animate);
-  return this;
-};
 
-// this is a more generic helper to get a rendering callback for the currently active haps
-// maybe this could also use Drawer internally? might need to support setting a custom pattern in Drawer
 let memory = {};
-Pattern.prototype.onFrame = function (fn, options) {
+Pattern.prototype.draw = function (fn, options) {
   if (typeof window === 'undefined') {
     return this;
   }
diff --git a/packages/draw/pianoroll.mjs b/packages/draw/pianoroll.mjs
index 310bfd70..dc2faac4 100644
--- a/packages/draw/pianoroll.mjs
+++ b/packages/draw/pianoroll.mjs
@@ -36,26 +36,23 @@ const getValue = (e) => {
 };
 
 Pattern.prototype.pianoroll = function (options = {}) {
-  let { cycles = 4, playhead = 0.5, overscan = 1, hideNegative = false, ctx, id } = options;
+  let { cycles = 4, playhead = 0.5, overscan = 0, hideNegative = false, ctx = getDrawContext(), id = 1 } = options;
 
   let from = -cycles * playhead;
   let to = cycles * (1 - playhead);
-
+  const inFrame = (hap, t) => (!hideNegative || hap.whole.begin >= 0) && hap.isWithinTime(t + from, t + to);
   this.draw(
-    (ctx, haps, t) => {
-      const inFrame = (event) =>
-        (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.endClipped >= t + from;
+    (haps, time) => {
       pianoroll({
         ...options,
-        time: t,
+        time,
         ctx,
-        haps: haps.filter(inFrame),
+        haps: haps.filter((hap) => inFrame(hap, time)),
       });
     },
     {
-      from: from - overscan,
-      to: to + overscan,
-      ctx,
+      lookbehind: from - overscan,
+      lookahead: to + overscan,
       id,
     },
   );