Alguien sabe como hacer para que pueda dibujar puntos?

¡Hola Andresfernandovalenciaarenas!

¿Puedes compartir tu código con nosotros?

Calro que sí, este es código

<canvas width = "600" height="400"></canvas>
<script>
    var pantalla = document.querySelector("canvas")
    var pincel = pantalla.getContext("2d")
    pincel.fillStyle = "grey"
    pincel.fillRect(0,0,600,400)
    var colores = ["blue", "red", "green","yellow","purple"];        
    var indiceColorActual = 0; // comienza con blue
    var puedoDibujar = false

    let yCuadro=0
    let xCuadro = 0
    tamano = 50
    dibujarPaleta(xCuadro,yCuadro,tamano, colores)
    function dibujarPaleta(){

        for(let i=0;i<colores.length;i++){
            pincel.fillStyle = colores[i]
            pincel.fillRect(xCuadro,yCuadro,tamano,tamano)
            pincel.fillStyle = "black"
            pincel.strokeRect(xCuadro,yCuadro,tamano,tamano)
            xCuadro+=50
        }    
    }
    var radio = 10
    var colorActual = "blue"
    function dibujarCirculo(x,y,colorActual){
        if (puedoDibujar) { 
            pincel.fillStyle = colorActual
            pincel.beginPath()//es como decirle vamos a comenzar a graficar
            pincel.arc(x,y,radio,0,2*Math.PI)
            pincel.fill()
            console.log(x + "," + y)
         }

    }

    function dibujarPunto(evento){
            var x = evento.pageX - pantalla.offsetLeft
            var y = evento.pageY - pantalla.offsetTop
            pincel.fillStyle = colores[indiceColorActual]
            pincel.beginPath()//es como decirle vamos a comenzar a graficar
            pincel.arc(x,y,radio,0,2*Math.PI)
            pincel.fill()
            console.log(x + "," + y)

    }

    function alterarColor(){
       indiceColorActual++
       if(indiceColorActual>=colores.length){
        indiceColorActual = 0
       }
       alert(indiceColorActual)
       return false; //menú contextual padrón de `canvas` no sea exhibido
    }
    function ElegirColor(evento){
       var x = evento.pageX - pantalla.offsetLeft;
       var y = evento.pageY - pantalla.offsetTop;
       if(y>yCuadro && y<yCuadro+tamano){
            if(x>0 && x<tamano){
                colorActual = "blue"
                console.log(colorActual)
            }else if(x>50 && x<50+tamano){
                colorActual = "red";
                console.log(colorActual)
            }else if(x>100 && x<100+tamano){
                colorActual = "green";
                console.log(colorActual)
            }else if(x>150 && x<150+tamano){
                colorActual = "yellow";
                console.log(colorActual)
            }else if(x>200 && x<200+tamano){
                colorActual = "purple";
                console.log(colorActual)
            }

       }
    }


    //función para restringir el area
    function puedoDibujarArea(cordenadaX,cordenadaY){
        if(cordenadaX>=0 && cordenadaX<=5*tamano+radio && cordenadaY>=0 && cordenadaY<=tamano+radio){
            return false
        }else{
            return true
        }
    }
    function capturarMovimientoDelMouse(evento){
        var x = evento.pageX - pantalla.offsetLeft
        var y = evento.pageY - pantalla.offsetTop
        if(puedoDibujarArea(x,y)){
            dibujarCirculo(x,y,colorActual)
        }
    }

    pantalla.onclick = dibujarPunto
    pantalla.onclick = ElegirColor
    pantalla.oncontextmenu = alterarColor
    pantalla.onmousemove = capturarMovimientoDelMouse

    function habilitarDibujar(){
        puedoDibujar = true
    }
    function deshabilitarDibujar(){
        puedoDibujar = false
    }

    pantalla.onmousedown = habilitarDibujar
    pantalla.onmouseup = deshabilitarDibujar




</script>