pianoroll optimizations

- fix flickering due to global alpha mutation
- change default inactive color
- add smear option
- add playheadColor option

packages/tone/pianoroll.mjs

@@ -22,10 +22,14 @@ Pattern.prototype.pianoroll = function ({
   flipTime = 0,
   flipValues = 0,
   hideNegative = false,
-  inactive = '#C9E597',
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
   active = '#FFCA28',
   // background = '#2A3236',
   background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
   minMidi = 10,
   maxMidi = 90,
   autorange = 0,
@@ -61,8 +65,11 @@ Pattern.prototype.pianoroll = function ({
   this.draw(
     (ctx, events, t) => {
       ctx.fillStyle = background;
-      ctx.clearRect(0, 0, w, h);
+      ctx.globalAlpha = 1; // reset!
-      ctx.fillRect(0, 0, w, h);
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
       const inFrame = (event) =>
         (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
       events.filter(inFrame).forEach((event) => {
@@ -97,9 +104,10 @@ Pattern.prototype.pianoroll = function ({
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
       });
+      ctx.globalAlpha = 1; // reset!
       const playheadPosition = scale(-from / timeExtent, ...timeRange);
       // draw playhead
-      ctx.strokeStyle = 'white';
+      ctx.strokeStyle = playheadColor;
       ctx.beginPath();
       if (vertical) {
         ctx.moveTo(0, playheadPosition);