mostrar ponto a partir do Sublime?

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

<script>



    let tela = document.querySelector("canvas");
    let pincel = tela.getContext("2d");



    let velocidadeXBola = 5;
    let velocidadeYbola = 2;
    let xInicial = 200;
    let yInicial = 300;
    let xInicialInimigo;
    let yInicialInimigo;
    let YIinicialRect = 50;
    let xInicialRect = 50;
    let raio = 8;
    let cor = "white";
    let corRect = "blue";

    // teclas direcionais

    let esquerda = 37;
    let cima = 38;
    let direita = 39;
    let baixo = 40;



    function desenhaRetangulo (xInicialRect, YIinicialRect, corRect) {

        pincel.fillStyle = corRect;
        pincel.beginPath();
        pincel.fillRect (xInicialRect, YIinicialRect, 8, 80);
        pincel.fill();
    }


    function desenhaBola(xInicial, yInicial, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(xInicial, yInicial, raio, 0, 2 * Math.PI);
        pincel.fill()

    }

    function apagaTela() {

        pincel.clearRect(0,0,600,600);
    }


    function sensoresDirecionais (evento) {

        //if(evento.keyCode == esquerda) {
            //xInicialRect -= 10; }
        //if(evento.keyCode == direita) {
            //xInicialRect += 10; }
        if( evento.keyCode == cima) {
            YIinicialRect -= 10; }
        if ( evento.keyCode == baixo) {
            YIinicialRect += 10; }
    }

    function limiteBorda () {

        if(xInicial + raio > 600 || xInicial - raio < 0)   {

            velocidadeXBola *= -1; }

        if( yInicial + raio > 600 || yInicial - raio < 0) {
            velocidadeYbola *= -1; 
        }
        }



    function colidirRaquete () {

        if ( xInicial - raio < xInicialRect + 8 && yInicial - raio < YIinicialRect + 80 && yInicial + raio > YIinicialRect) {
            velocidadeXBola *= -1;
        }

        if (xInicial + raio > xInicialInimigo - 8 && yInicial + raio < yInicialInimigo + 80 && yInicial + raio > yInicialInimigo) {
            velocidadeXBola *= -1;
        }
    }


    function movimentoBola () {


        apagaTela();

        pincel.fillStyle ="black";
        pincel.fillRect(0,0,600,600);

        desenhaRetangulo(xInicialRect, YIinicialRect, corRect);

        desenhaRetangulo(xInicialInimigo, yInicialInimigo, corRect);
        xInicialInimigo = 550;
        yInicialInimigo = yInicial - 40;

        desenhaBola(xInicial, yInicial, raio, cor);
        xInicial -= velocidadeXBola;
        yInicial += velocidadeYbola;

        limiteBorda ();
        colidirRaquete();


        }


    setInterval(movimentoBola, 10);


    document.onkeydown = sensoresDirecionais;



</script>

não estou usando o site(p5) que o professor está usando. após fazer lógica de programação 1 e 2, preferi continuar com o mesmo modo que os módulos supracitados me ensinaram (até pra exercitar). Mas não estou conseguindo colocar os pontos (aparentemente o comando "text" não funciona fora do site p5, certo? qual seria o comando para realizar essa operação ? também gostaria de saber a diferença entre let e var, se possível. obrigado.