no entendi la parte del document.getElementById

Solo llama el elemento que tengas en HTML con el mismo ID.

Mira, esta es la parte del html, y en la etiqueta de <canva> se le agregó un id="dibujito", el id te permite usar las características de dicha etiqueta...

Ahora, si nos vamos al javascript:

declaramos una variable llamada d, a la cual queremos obtener dichas características del html y eventualmente modificarla según queramos. En ese caso, fue para poder dibujar sobre la etiqueta de canva desde el javascript. (:

Sí, en resumen con esa función propia de JS puedes manipular el DOM :)

En pocas palabras permite buscar un elemento en el dom que tenga el id que pases como parametro.

El id es un noombre que tu le asignas a un elemento en html con el objetivo de diferenciarlo de otros elementos de su tipo y de manipularlo con javascript e incluso con css

El id es un nombre unico que puede tener un elemento en nuestro codigo html a diferencia del class en el cual varios elementos pueden tener una misma clase, ahora con document.getElementById es para decirle a js que queremos hacer algo con ese elemento en especifico el cual tiene un nombre unico, cuando queremos trabajar con varios elementos a la vez en js utilizamos el document.getElementsByClass

El document.getElementById selecciona un elemento HTML con el ID que le estas indicando, sirve para trabajar con los elementos HTML desde JavaScript.