Tengo una clase principal, que tiene un <canvas> y una propiedad de tool .
(escrito en mecanografiado):

 class CanvasHandler { canvas: HTMLCanvasElement; tool: Tool; constructor(canvas: HTMLCanvasElement, tool: Tool) { this.canvas = canvas; this.tool = tool; } }

La tool será una instancia de la clase Pen , que extiende Tool :

 interface IPen { size: number; color: string; } class Pen extends Tool implements IPen { size: number; color: string; constructor(size: number, color: string) { super(ToolNames.PEN, ToolDescriptions.PEN); this.size = size; this.color = color; } override onMouseMove(event: Event) { // DRAW CIRCLE TO CANVAS } }

Implementé un Observer en el <canvas> -Element, por lo que ahora cada vez que el mouse se mueve sobre el lienzo, se ejecuta el método onMouseMove de CanvasHandler.tool . Ahora, cada vez que se llama a la función onMouseMove , quiero dibujar un círculo en <canvas> . Podría proporcionar una referencia al <canvas> , para que la clase Tool "conozca" el <canvas> , y 'onMouseMove' podría anular el comportamiento de dibujo en Pen . Sin embargo, me pregunto, si no hay una mejor manera, de reubicar la funcionalidad de dibujo, de modo que la clase Pen y Tool no "sepan" directamente sobre el elemento <canvas> .