La razón por la que se necesita obtener el contexto 2D del canvas utilizando el método getContext es porque el canvas en sí mismo no tiene métodos o propiedades que permitan dibujar en él. En cambio, se utiliza el contexto 2D del canvas para realizar operaciones de dibujo.
El canvas es esencialmente un lienzo en blanco que se puede utilizar para dibujar, pero no proporciona una interfaz de programación de aplicaciones (API) directa para el dibujo. En cambio, el contexto 2D del canvas proporciona una API que se puede utilizar para dibujar formas, texto y otros elementos gráficos en el canvas.
Por lo tanto, después de obtener una referencia al canvas utilizando document.querySelector, se debe obtener el contexto 2D del canvas utilizando el método getContext. Una vez que se tiene el contexto 2D, se puede utilizar para dibujar formas y otros elementos gráficos en el canvas.