Pq só funciona com o css interno?

Quado eu tento fazer com o css externo a bolinha não aparece, mas quando faço com o interno colocando a width e height na tag canvas aparece normalmente

        <canvas width="600" height="400">
        </canvas>


        <script>
            var tela = document.querySelector('canvas')
            var pincel = tela.getContext('2d')

            pincel.fillStyle = 'grey'
            pincel.fillRect (0,0,600,400)

            function exibeAlerta(evento){

                var x = evento.pageX - tela.offsetLeft
                var y = evento.pageY - tela.offsetTop

                pincel.fillStyle = 'darkred'
                pincel.beginPath()
                pincel.arc(x,y,10,0, 2 * 3.14)
                pincel.fill()

            }

            tela.onclick = exibeAlerta

        </script>