feat: レンダラークラスを実装

docs/sample/sample.js

@@ -350,8 +350,8 @@ const loadComments = async () => {
   canvasElement.style.transform = `scale(${(videoItem.scale || 100) - 1}%)`;
   const req = await fetch(`./commentdata/${video}.json`);
   const res = await req.json();
-
-  nico = new NiconiComments(canvasElement, res, {
+  const renderer = new NiconiComments.internal.renderer.CanvasRenderer(canvasElement);
+  nico = new NiconiComments(renderer, res, {
     mode: mode,
     keepCA: keepCA,
     format: "formatted",

src/@types/IComment.ts

@@ -1,9 +1,5 @@
-import type {
-  Canvas,
-  CommentLoc,
-  FormattedCommentWithSize,
-  Position,
-} from "@/@types/";
+import type { CommentLoc, FormattedCommentWithSize, Position } from "@/@types/";
+import type { IRenderer } from "@/@types/renderer";
 
 export interface IComment {
   comment: FormattedCommentWithSize;
@@ -19,7 +15,7 @@ export interface IComment {
   layer: number;
   mail: string[];
   content: string;
-  image?: Canvas | null;
+  image?: IRenderer | null;
   draw: (vpos: number, showCollision: boolean, cursor?: Position) => void;
   isHovered: (cursor?: Position, posX?: number, posY?: number) => boolean;
 }

src/@types/IPlugins.ts

@@ -1,8 +1,9 @@
-import type { Canvas, IComment } from "@/@types/";
+import type { IComment } from "@/@types/";
+import type { IRenderer } from "@/@types/renderer";
 
 export interface IPluginConstructor {
   id: string;
-  new (Canvas: Canvas, comments: IComment[]): IPlugin;
+  new (Canvas: IRenderer, comments: IComment[]): IPlugin;
 }
 
 export interface IPlugin {
@@ -13,5 +14,5 @@ export interface IPlugin {
 
 export type IPluginList = {
   instance: IPlugin;
-  canvas: HTMLCanvasElement;
+  canvas: IRenderer;
 }[];

src/@types/renderer.ts

@@ -0,0 +1,37 @@
+export interface IRenderer {
+  readonly canvas: HTMLCanvasElement;
+  readonly video?: HTMLVideoElement;
+  drawVideo(enableLegacyPip: boolean): void;
+  getFont(): string;
+  getFillStyle(): string | CanvasGradient | CanvasPattern;
+  setScale(scale: number, arg1?: number): void;
+  fillRect(x: number, y: number, width: number, height: number): void;
+  strokeRect(x: number, y: number, width: number, height: number): void;
+  fillText(text: string, x: number, y: number): void;
+  strokeText(text: string, x: number, y: number): void;
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  clearRect(x: number, y: number, width: number, height: number): void;
+  setFont(font: string): void;
+  setFillStyle(color: string): void;
+  setStrokeStyle(color: string): void;
+  setLineWidth(width: number): void;
+  setGlobalAlpha(alpha: number): void;
+  setSize(width: number, height: number): void;
+  getSize(): { width: number; height: number };
+  measureText(text: string): TextMetrics;
+  beginPath(): void;
+  closePath(): void;
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  stroke(): void;
+  save(): void;
+  restore(): void;
+  getCanvas(): IRenderer;
+  drawImage(
+    image: IRenderer,
+    x: number,
+    y: number,
+    width?: number,
+    height?: number,
+  ): void;
+}

src/comments/BaseComment.ts

@@ -1,6 +1,4 @@
 import type {
-  Canvas,
-  Context2D,
   FormattedComment,
   FormattedCommentWithFont,
   FormattedCommentWithSize,
@@ -10,18 +8,18 @@ import type {
   ParseContentResult,
   Position,
 } from "@/@types/";
+import type { IRenderer } from "@/@types/renderer";
 import { imageCache } from "@/contexts";
 import { isDebug } from "@/contexts/debug";
 import { config } from "@/definition/config";
 import { NotImplementedError } from "@/errors/";
 import { getPosX, isBanActive, isReverseActive, parseFont } from "@/utils";
-import { drawImage, generateCanvas, getContext } from "@/utils/canvas";
 
 /**
  * コメントの描画を行うクラスの基底クラス
  */
 class BaseComment implements IComment {
-  protected readonly context: Context2D;
+  protected readonly renderer: IRenderer;
   protected cacheKey: string;
   public comment: FormattedCommentWithSize;
   public pos: {
@@ -30,16 +28,16 @@ class BaseComment implements IComment {
   };
   public posY: number;
   public readonly pluginName: string = "BaseComment";
-  public image?: Canvas | null;
-  public buttonImage?: Canvas | null;
+  public image?: IRenderer | null;
+  public buttonImage?: IRenderer | null;
 
   /**
    * コンストラクタ
    * @param comment 処理対象のコメント
-   * @param context 描画対象のcanvasのcontext
+   * @param renderer 描画対象のレンダラークラス
    */
-  constructor(comment: FormattedComment, context: Context2D) {
-    this.context = context;
+  constructor(comment: FormattedComment, renderer: IRenderer) {
+    this.renderer = renderer;
     this.posY = 0;
     this.pos = { x: 0, y: 0 };
     comment.content = comment.content.replace(/\t/g, "\u2003\u2003");
@@ -182,18 +180,18 @@ class BaseComment implements IComment {
       this.image = this.getTextImage();
     }
     if (this.image) {
-      this.context.save();
+      this.renderer.save();
       if (this.comment._live) {
-        this.context.globalAlpha = config.contextFillLiveOpacity;
+        this.renderer.setGlobalAlpha(config.contextFillLiveOpacity);
       } else {
-        this.context.globalAlpha = 1;
+        this.renderer.setGlobalAlpha(1);
       }
       if (this.comment.button && !this.comment.button.hidden) {
         const button = this.getButtonImage(posX, posY, cursor);
-        button && drawImage(this.context, button, posX, posY);
+        button && this.renderer.drawImage(button, posX, posY);
       }
-      drawImage(this.context, this.image, posX, posY);
-      this.context.restore();
+      this.renderer.drawImage(this.image, posX, posY);
+      this.renderer.restore();
     }
   }
 
@@ -204,15 +202,15 @@ class BaseComment implements IComment {
    */
   protected _drawRectColor(posX: number, posY: number) {
     if (this.comment.wakuColor) {
-      this.context.save();
-      this.context.strokeStyle = this.comment.wakuColor;
-      this.context.strokeRect(
+      this.renderer.save();
+      this.renderer.setStrokeStyle(this.comment.wakuColor);
+      this.renderer.strokeRect(
         posX,
         posY,
         this.comment.width,
         this.comment.height,
       );
-      this.context.restore();
+      this.renderer.restore();
     }
   }
 
@@ -223,15 +221,15 @@ class BaseComment implements IComment {
    */
   protected _drawBackgroundColor(posX: number, posY: number) {
     if (this.comment.fillColor) {
-      this.context.save();
-      this.context.fillStyle = this.comment.fillColor;
-      this.context.fillRect(
+      this.renderer.save();
+      this.renderer.setFillStyle(this.comment.fillColor);
+      this.renderer.fillRect(
         posX,
         posY,
         this.comment.width,
         this.comment.height,
       );
-      this.context.restore();
+      this.renderer.restore();
     }
   }
 
@@ -242,15 +240,11 @@ class BaseComment implements IComment {
    */
   protected _drawDebugInfo(posX: number, posY: number) {
     if (isDebug) {
-      this.context.save();
-      const font = this.context.font;
-      const fillStyle = this.context.fillStyle;
-      this.context.font = parseFont("defont", 30);
-      this.context.fillStyle = "#ff00ff";
-      this.context.fillText(this.comment.mail.join(","), posX, posY + 30);
-      this.context.font = font;
-      this.context.fillStyle = fillStyle;
-      this.context.restore();
+      this.renderer.save();
+      this.renderer.setFont(parseFont("defont", 30));
+      this.renderer.setFillStyle("#ff00ff");
+      this.renderer.fillText(this.comment.mail.join(","), posX, posY + 30);
+      this.renderer.restore();
     }
   }
 
@@ -274,7 +268,7 @@ class BaseComment implements IComment {
    * コメントの画像を生成する
    * @returns 生成した画像
    */
-  protected getTextImage(): Canvas | null {
+  protected getTextImage(): IRenderer | null {
     if (
       this.comment.invisible ||
       (this.comment.lineCount === 1 && this.comment.width === 0) ||
@@ -309,7 +303,7 @@ class BaseComment implements IComment {
   /**
    * コメントの画像を実際に生成する
    */
-  protected _generateTextImage(): Canvas {
+  protected _generateTextImage(): IRenderer {
     console.error("_generateTextImage method is not implemented");
     throw new NotImplementedError(this.pluginName, "_generateTextImage");
   }
@@ -318,7 +312,7 @@ class BaseComment implements IComment {
    * 画像をキャッシュする
    * @param image キャッシュ対象の画像
    */
-  protected _cacheImage(image: Canvas) {
+  protected _cacheImage(image: IRenderer) {
     this.image = image;
     setTimeout(
       () => {
@@ -337,27 +331,11 @@ class BaseComment implements IComment {
     };
   }
 
-  /**
-   * Canvasを生成する
-   * @returns 生成したCanvas
-   */
-  protected createCanvas(): {
-    image: Canvas;
-    context: Context2D;
-  } {
-    const image = generateCanvas();
-    const context = getContext(image);
-    return {
-      image,
-      context,
-    };
-  }
-
   protected getButtonImage(
     posX: number,
     posY: number,
     cursor?: Position,
-  ): Canvas | undefined {
+  ): IRenderer | undefined {
     console.error(
       "getButtonImage method is not implemented",
       posX,