drawWithAlpha

canvas.ts

@@ -81,6 +81,7 @@ export class Doodler {
   }
 
   protected draw() {
+    this.ctx.clearRect(0, 0, this.width, this.height);
     this.ctx.fillStyle = this.bg;
     this.ctx.fillRect(0, 0, this.width, this.height);
     // for (const d of this.draggables.filter(d => d.beingDragged)) {
@@ -88,6 +89,7 @@ export class Doodler {
     // }
     for (const [i, l] of (this.layers || []).entries()) {
       l(this.ctx, i);
+      this.drawDeferred();
     }
     this.drawUI();
   }
@@ -197,6 +199,13 @@ export class Doodler {
     this.ctx.restore();
   }
 
+  drawWithAlpha(alpha: number, cb: () => void) {
+    this.ctx.save();
+    this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
+    cb();
+    this.ctx.restore();
+  }
+
   drawImage(img: HTMLImageElement, at: Vector): void;
   drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
   drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) {
@@ -226,12 +235,27 @@ export class Doodler {
     );
   }
 
+  private deferredDrawings: (() => void)[] = [];
+
+  deferDrawing(cb: () => void) {
+    this.deferredDrawings.push(cb);
+  }
+
+  drawDeferred() {
+    while (this.deferredDrawings.length) {
+      this.deferredDrawings.pop()?.();
+    }
+  }
+
   setStyle(style?: IStyle) {
     const ctx = this.ctx;
     ctx.fillStyle = style?.color || style?.fillColor || "black";
     ctx.strokeStyle = style?.color || style?.strokeColor || "black";
 
     ctx.lineWidth = style?.weight || 1;
+
+    ctx.textAlign = style?.textAlign || ctx.textAlign;
+    ctx.textBaseline = style?.textBaseline || ctx.textBaseline;
   }
 
   fillText(text: string, pos: Vector, maxWidth: number, style?: IStyle) {
@@ -245,6 +269,10 @@ export class Doodler {
     this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
   }
 
+  clearRect(at: Vector, width: number, height: number) {
+    this.ctx.clearRect(at.x, at.y, width, height);
+  }
+
   // Interaction
 
   mouseX = 0;
@@ -409,6 +437,15 @@ interface IStyle {
 
   noStroke?: boolean;
   noFill?: boolean;
+
+  textAlign?: "center" | "end" | "left" | "right" | "start";
+  textBaseline?:
+    | "alphabetic"
+    | "top"
+    | "hanging"
+    | "middle"
+    | "ideographic"
+    | "bottom";
 }
 
 interface IDrawable {