Olá Renato,
Na minha opinião nem é tanto em tornar o código mais legível, mas acostumar o programador a identificar com precisão exatamente o elemento que ele quer manipular, pois em um cenário real, um arquivo html teria várias tags repetidas, então o correto é diferenciá-las pelo identificador único "id".
No exemplo, abaixo como ter certeza qual seria o canvas que o programador deseja manipular se for utilizado "canvas" no querySelector?
<canvas id="tela1" width="300" height="400"></canvas>
<canvas id="tela2" width="300" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
</script>
Aí que entra a utilização do id para resolver o problema.
Lembrando que ao indicarmos um id sempre utilizamos um "#" antes.