Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Dibujar en canvas con las flechas del teclado

17/37
Recursos

Para dibujar en el navegador utilizamos una propiedad de JavaScript llamada Canvas. Canvas significa lienzo y esa es la funci贸n que cumple, crear un espacio en el navegador que ser谩 empleado como lienzo para dibujar.

var cuadro = document.getElementById("areaDibujo"); //Identificamos como areaDibujo al canvas o lienzo de HTML.
var papel = cuadro.getContext("2d"); //Defino el context.
cuadro.addEventListener("mousedown", lineaInicial); //Cuadro escucha el evento del clic abajo del mouse y ejecuta la funci贸n lineaInicial
cuadro.addEventListener("mouseup", finLinea); //Cuadro escucha el evento clic arriba -soltar- y ejecuta finLinea
cuadro.addEventListener("mousemove", lineaMovimiento); //cuadro escucha el mov del mouse y ejecutas lineaMovimiento.

var colorPincel = "#000"; //El color de la linea.
let mouse = false; // La variable mouse por defecto ser谩 false porque as铆 lo defin铆

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){ //Esta es la funci贸n base del dibujo.
    lienzo.beginPath();
    lienzo.strokeStyle= colorPincel; //Cambi茅 esta variable por otro nombre
    lienzo.lineWidth = 1;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

function lineaInicial(){ //Linea inicial me cambia el false por defecto a true.
    mouse = true;
}

function finLinea(){ //Esta funci贸n me vuelve a poner al mouse como nulo, es decir false.
    mouse = false;
}
function lineaMovimiento(event){ //Esta funci贸n dice 
    if(mouse == true){ //Si mouse es true -es decir si est谩 siendo mousedown, va a dibujar.
        dibujarLinea("colorPincel", event.layerX - 1, event.layerY - 1, event.layerX + 1, event.layerY + 1, papel);
    } //Como dibujar谩
}```

Aporte creado por Luis El铆as Fernandez

Aportes 2335

Preguntas 588

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Nuestro profe inmortalizado en canvas

Logr茅 hacer una selecci贸n de color y le agregu茅 una goma para que sea m谩s c贸modo 馃槃

馃惐鈥嶐煉 Dibujando con el mouse del ordenador.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Dibujando con el mouse</title>
</head>
<body>
    <p>
        Selecciona el color de la pluma: 
        <input type="color" id="sellecionar_color">
    </p>
    <canvas width="300" height="300" id="area_de_dibujo"></canvas>
    <script src="eventos.js"></script>
    <p>Mueve tu mouse para dibujar</p>
</body>
</html>
var color = document.getElementById("sellecionar_color");
var cuadro = document.getElementById("area_de_dibujo");
var papel = cuadro.getContext("2d");
var estado;
var x ;
var y ;

cuadro.addEventListener("mousedown", pulsarMouse);
cuadro.addEventListener("mousemove", moverMouse);
cuadro.addEventListener("mouseup",levantarMouse);

function pulsarMouse(evento)
{
    estado = 1;
    x = evento.layerX;
    y = evento.layerY;
}

function moverMouse(evento)
{
    if(estado == 1)
    {
        dibujarLinea(color.value, x , y , evento.layerX, evento.layerY);
    }else{
        x = evento.layerX;
        y = evento.layerY;
    }
}

function levantarMouse(evento)
{
    estado = 0;
}

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
    papel.beginPath();
    papel.lineWidth = 3;
    papel.strokeStyle = color;
    papel.moveTo(xinicial, yinicial);
    papel.lineTo(xfinal, yfinal);
    papel.stroke();
    papel.closePath;
}

Me piqu茅 un poco con 茅ste programa鈥
Inspir谩ndome un poco en Paint, le agregu茅 un bot贸n para limpiar la hoja. Tambi茅n se puede elegir cualquier color y el tama帽o del 鈥渓谩piz鈥. Por 煤ltimo le agregu茅 un borrador (tipo Paint), el cual tambi茅n pude tener diferentes grosores.

Ac谩 un screenshot de un dibujo realizado con el programa. 馃槂

Despu茅s de 2 d铆as y muchas neuronas por fin obtuve un resultado 鈥渄ecente鈥濃 No logre que funcione en el m贸vil me imagino que eso ya es con los eventos touch.



No me bast贸 con el codigo, ten铆a tambi茅n que probarlo y me qued茅 pegado XD

![](

As铆 quedo mi canvas, aun tengo algunos errores pero de momento me funciona bien

Como descubrieron que existe un 鈥渕ousemove鈥 y el resto de las cosas? Lo unico que logre con la informacion que tenia hasta ahora es que el console.log me tire la informacion de cuando hago click o suelto el mouse o lo presiono.
Soy muy tonto o ustedes ya tienen mas experiencia?

no entiendo como hacer en mouse, se siente feo no saber que hacer la verdad, nose ni si quiera por donde empezar 馃槮

Logre hacer mi propio jueguito de culebrita 馃槂 esta genial, gracias. abajo deje el codigo

Este fue mi resultado del Challenge鈥 隆qu茅 genial, bonito y asombroso!.. es aprender:





Me costo varios dias y muchas preguntas al se帽or google pero hice un programa de pizarra con funciones para cambiar el color del trazo, color de fondo, grosor del trazo y para elegir colores del trazo y fondo con hexadecimales(lo iva a hacer que funcionara tambien con rbg y cmyk pero ya me daba flojera xD) ademas una funcion para limpiar el canvas y bueno no termine el borrador pero esque ya quiero pasar a la siguiente clase :p

aqui un link a mi html, js y css por si a alguien le interesa:
https://drive.google.com/drive/folders/1pJsoS-21M6JEMdl6ZvtI7mQECMaioKcz?usp=sharing

DESAF脥O COMPLETO PARA M脫VILES

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Dibujando con tu Dedo</title>
  </head>
  <body>
    <canvas width="1000" height="1000" id="area_de_dibujo"></canvas>
    <p>Mueve tu dedo en la pantalla para dibujar</p>
    <script type="text/javascript">

      var cuadrito = document.getElementById("area_de_dibujo");
      var papel = cuadrito.getContext("2d");
      var x;
      var y;
      var dibujando = false;
      var color = "green";

      document.addEventListener("touchstart", evento =>
      {
        x = evento.touches[0].pageX;
        y = evento.touches[0].pageY;
        dibujando = true;
      });

      document.addEventListener("touchmove", evento =>
      {
        if (dibujando == true)
        {
          dibujarLinea(color, x - 10, y - 10, evento.touches[0].pageX - 10, evento.touches[0].pageY - 10, papel);
          x = evento.touches[0].pageX;
          y = evento.touches[0].pageY;
        }
      });

      document.addEventListener("touchend", evento =>
      {
        dibujando = false;
      });

      dibujarLinea("red", x-1, y-1, x+1, y+1, papel);

      function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
      {
        lienzo.beginPath();
        lienzo.strokeStyle = color;
        lienzo.lineWidth = 3;
        lienzo.moveTo(xinicial, yinicial);
        lienzo.lineTo(xfinal, yfinal);
        lienzo.stroke();
        lienzo.closePath();
      }

    </script>
  </body>
</html>

Hola a todos, les doy un consejo, revisen documentaci贸n sobre CANVAS, no se queden con lo que ven ac谩 y les sera de mayor ayuda, estoy a un paso de adquirir el Plan Expert y ahora despu茅s de este curso estoy mas convencido.
Por ejemplo, si leen la documentaci贸n (y les recomiendo en Ingles) se daran cuenta que luego de stroke() ya no importa que pongas, porque es como si ya se hizo el trazo, osea el closePath() ya no tiene efecto, este closePath se usa si tu quieres cerrar los trazos realizados, bueno un consejo hasta de un conejo, realmente tengo muchas expectativas de Platzi y estoy convencido que no me defraudara.

Les comparto como qued贸 el lienzo despu茅s de hacer trazos en el con el mouse.

Ahora bien, el c贸digo que implement茅 es el siguiente.
Para el HTML tenemos:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con el MOUSE</title>
    <style>
      body {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <h1>Dibujando con el movimiento del MOUSE</h1>
    <canvas width="500" height="500" id="area_dibujo"></canvas>
    <p>Aqui puedes dibujar lo que quieras con el MOUSE de tu computadora</p>
    <script src="eventos_mouse.js"></script>
  </body>
</html>

Y para el JavaScript se tiene lo siguiente:

var cuadro = document.getElementById("area_dibujo");
var papel = cuadro.getContext("2d");

dibujarLinea("black", 1, 1, 499, 1, papel);
dibujarLinea("black", 1, 1, 1, 499, papel);
dibujarLinea("black", 1, 499, 499, 499, papel);
dibujarLinea("black", 499, 499, 499, 1, papel);

var mousePresionado = false;
var pos_x;
var pos_y;

cuadro.addEventListener("mousedown", cursor_presionado);
cuadro.addEventListener("mousemove", cursor_en_movimiento);
cuadro.addEventListener("mouseup", cursor_no_presionado);

function cursor_presionado(evento) {
  pos_x = evento.offsetX;
  pos_y = evento.offsetY;
  mousePresionado = true;
}

function cursor_en_movimiento(evento) {
  if (mousePresionado == true) {
    dibujarLinea("black", pos_x, pos_y, evento.offsetX, evento.offsetY, papel);
    pos_x = evento.offsetX;
    pos_y = evento.offsetY;
  }
}

function cursor_no_presionado(evento) {
  if (mousePresionado == true) {
    dibujarLinea("black", pos_x, pos_y, evento.offsetX, evento.offsetY, papel);
    console.log(evento.offsetX);
    console.log(evento.offsetY);
    mousePresionado = false;
  }
}

function dibujarLinea(color, xi, yi, xf, yf, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 4;
  lienzo.moveTo(xi, yi);
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}

De igual forma les comparto el recurso web del que me apoy茅:

document.addEventListener("mousemove", dibujarMouse);
document.addEventListener("mousedown", clickPresionado);
document.addEventListener("mouseup", clickSuelto);

var paleta = document.getElementById("colores");
var cajaTexto = document.getElementById("numero");

var c = document.getElementById("dibujo4");
var obColor
var papel = c.getContext("2d");
var obTeclas = {
    UP: 38,
    DOWN: 40,
    RIGTH: 39,
    LEFT: 37,
};

var presionado=false;
function clickPresionado() {
    presionado = true;
}
function clickSuelto() {
    presionado = false;
}

function dibujarMouse(evento) {
    var color = paleta.value;
    var anchoLinea=parseInt(cajaTexto.value);

    if (presionado == true) {
        var x = evento.layerX;
        var y = evento.layerY;
        DibujerLinea(color, x, y, x - 1, y - 1, papel,anchoLinea);
    }
}

function dibujarTeclado(evento) {
    var paleta = document.getElementById("colores");
    var color = paleta.value;
    var vMovimiento = 10;

    switch (evento.keyCode) {
        case obTeclas.UP:
            DibujerLinea(color, x, y, x, y - vMovimiento, papel);
            y = y - vMovimiento;
            break;

        case obTeclas.DOWN:
            DibujerLinea(color, x, y, x, y + vMovimiento, papel);
            y = y + vMovimiento;
            break;

        case obTeclas.LEFT:
            DibujerLinea(color, x, y, x - vMovimiento, y, papel);
            x = x - vMovimiento;
            break;

        case obTeclas.RIGTH:
            console.log("flecha Derecha");
            DibujerLinea(color, x, y, x + vMovimiento, y, papel);
            x = x + vMovimiento;

            break;
        default:
            break;
    }
}//dibujarTeclado



function DibujerLinea(tColor, xInicio, yInicio, xFin, yFin, lienzo,gruesoLinea) {
    lienzo.beginPath();//arrancar un trazo con javascript
    lienzo.strokeStyle = tColor;
    lienzo.lineWidth = gruesoLinea;
    lienzo.moveTo(xInicio, yInicio);//$1 x $2 y  - desde
    lienzo.lineTo(xFin, yFin);//traza un linea lineTO -  hasta
    lienzo.stroke();
    lienzo.closePath();
}```

Mi aporte, se dibuja en haciendo click sobre el canvas adem谩s de que se puedes escoger el color y grosor de la linea

eventos.html

<!DOCTYPE html>
<html lang="pe">

<head>
    <meta charset="utf-8">
    <title>Muevelo muevelo</title>
    <style>
        #palitoDibujito {
            background-color: #FFFBDF;
        }
    </style>
</head>

<body>
    <p>
        Color: <input type="color" value="#000" id="colorcito"><br>
        Grosor de lapiz: <input type="number" min="1"  max="10" value=1 id="numerito"><br>
        coordenadas x,y: (<span id="coordenadas">0,0</span>)
    </p>
    <canvas id="palitoDibujito" width="500" height="300"></canvas>
    <p>Presiona las flechas para dibujar o haz click y arrastra con el mouse</p>
    <script src="eventos.js"></script>
</body>

</html>

eventos.js

var color = document.getElementById("colorcito");//input color
var grosor = document.getElementById("numerito");//input number
var posicion = document.getElementById("coordenadas");//donde escribir las coordenadas
var dibujito = document.getElementById("palitoDibujito");//canvas
var lienzo = dibujito.getContext("2d");
var clientRect = dibujito.getBoundingClientRect();//obtener posicion de canvas
var ancho = dibujito.width;//ancho del canvas
var alto = dibujito.height;//altura del canvas
var xi = yi = x = y = null;//coordenadas
var paso = 10;
var presionado = false;

dibujito.addEventListener("pointermove", dibujarMouse);
dibujito.addEventListener("pointerdown", clickMouse);
dibujito.addEventListener("pointerup", soltarClickev);
dibujito.addEventListener("pointerout", soltarClickev);

function clickMouse(ev) {
    presionado = true;
    xi = Math.round(ev.clientX - clientRect.left);
    yi = Math.round(ev.clientY - clientRect.top);
}
function soltarClickev(ev) {
    presionado = false;
}

function dibujarMouse(ev) {
    x = Math.round(ev.clientX - clientRect.left);
    y = Math.round(ev.clientY - clientRect.top);
    if ((xi != x || yi != y) && presionado && (xi !== null && yi !== null)) {
        dibujar(lienzo, color.value, grosor.value, xi, yi, x, y);
    }
    posicion.innerHTML = x + ',' + y;
    xi = x;
    yi = y
}

var teclas = {
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40
};
document.addEventListener("keydown", dibujarTeclado);

function dibujarTeclado(ev) {
    xi = x;
    yi = y;
    switch (ev.keyCode) {
        case teclas.LEFT:
            x -= paso;
            break;
        case teclas.UP:
            y -= paso;
            break;
        case teclas.RIGHT:
            x += paso;
            break;
        case teclas.DOWN:
            y += paso;
            break;
        default:
            console.log('Presionaste otra tecla');
            break;
    }
    if (!(x > ancho || x < 0 || y > alto || y < 0)) {
        dibujar(lienzo, color.value, grosor.value, xi, yi, x, y);
        posicion.innerHTML = x + ',' + y;
    } else {
        x = xi;
        y = yi;
        console.log("No te salgas del limite");
    }
}

function dibujar(canvas, color, grosor, x_inicio, y_inicio, x_fin, y_fin) {
    //console.log(x_inicio + ":" + y_inicio + " - " + x_fin + ":" + y_fin)
    canvas.beginPath();
    canvas.strokeStyle = color;
    canvas.lineWidth = grosor;
    canvas.moveTo(x_inicio, y_inicio);
    canvas.lineTo(x_fin, y_fin);
    canvas.stroke();
    canvas.closePath();
}

Que tal, para el reto ayudense del video 16 de este curso donde ense帽a como detectar acciones realizadas, est谩 casi al comienzo, una vez que tengan una noci贸n de la locaci贸n del mouse dentro del canvas, con event.clientX (o Y), al asignarle una variable ya pueden obtener el valor de x o y y utilizarlo en el codigo. Ejemplo: var Posici贸nX = event.clientX;
Con eso ya pueden usar la coordenada clickeada por el usuario en el eje x o en el eje y. Saludos!

Es gracioso y frustrante porque seg煤n yo ya tenia el c贸digo bien pero no dibujaba. Tarde como 3 horas buscando e intentando diferentes cosas y al final el problema era que habia escrito 鈥渕ouseover鈥 en lugar de 鈥渕ousemove鈥. -.-

Hola! Les dejo mi versi贸n del c贸digo del desafio, ahi tiene unas anotaciones que hice para poder explicarme mejor, espero les ayude y no se confundan con ellas.

//usar mouse down y mouse up para dibujar!! es esta
//console log para mpuse down y up para las coordenadas del mouse
//ver cual es el objeto para disparar el evento, es diferente las coordenadas del mouse
//del documento o canvas

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var boton = document.getElementById("boton_de_borrar");

var x;
var y;

//Esta es una bandera que nos va a ayudar a saber que se inici贸 a dibujar
//para que no se dibuje cuando se mueva el mouse sin antes hacer click
var seEstaDibujando = false;

//La siguiente linea hace esto: 
//devuelve el tama帽o de un elemento y su posici贸n relativa respecto a
//la ventana de visualizaci贸n
var tamPos = cuadrito.getBoundingClientRect();

//Se a帽aden los listeners de cuando el mouse se presiona y suelta
cuadrito.addEventListener("mousedown",mousePresionado);
cuadrito.addEventListener("mousemove",moviendoMouse);
cuadrito.addEventListener("mouseup", terminarDibujo);
//Se a帽ade un listener para boton de borrar, porque me parecio bonito poner uno 
boton.addEventListener("click", borrarCanvas);

//El parametro "e" es el evento que se pasa, este tiene unos atributos llamados:
//clientX y clientY
//-clientX provee la coordenada horizontal respecto al area del cliente o de la aplicaci贸n
//donde el evento ocurre, o sea, nos da una coordenada como si el (0,0) iniciara en 
//la esquina superior izq de toda la p谩gina
//-clientY provee la coordenada vertical tomando en cuenta el mismo inicio
//por lo que a esto se le tiene que restar la posici贸n del canvas respecto a la p谩gina
//para obtener la coordenada del mouse dentro del canvas
//lo que se tiene que restar esta en lo que obtuvimos en la var tamPos
function mousePresionado(e){
    x = e.clientX - tamPos.left;
    y = e.clientY - tamPos.top;
    seEstaDibujando = true;

}
function moviendoMouse(e){
    if(seEstaDibujando){
        dibujarLinea("blue",x, y, e.clientX - tamPos.left, e.clientY - tamPos.top, papel);
        //se actualiza el valor de x inicial y y inicial con respecto a donde est谩 el mouse鈭
        x = e.clientX - tamPos.left;
        y = e.clientY - tamPos.top;
    }
}
function terminarDibujo(e){
    if(seEstaDibujando){
        //se dibuja una linea en la pos actual, para que se aplique el closePath
        dibujarLinea("blue",x, y, e.clientX - tamPos.left, e.clientY - tamPos.top, papel);
        //se da da la instrucci贸n de que se termin贸 de dibujar, para que despu茅s de
        //soltar el click, si se mueve el mouse ya no dibuje
        seEstaDibujando = false;
    }

}
//funcion para borrar el canvas
function borrarCanvas(){
    //Esto es lo que encontr茅 en internet que hace este m茅todo de clearRect
    //"convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y)
    //y tama帽o (width, height) a negro transparente, borrando cualquier contenido
    // dibujado anteriormente"
    papel.clearRect(0, 0, cuadrito.width, cuadrito.height);
    x = 0;
    y = 0;
}
//Funcion para dibujar una linea (NO TOCAR, por ahora?)
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){
    lienzo.beginPath(); //iniciar el camino
    lienzo.strokeStyle = color;
    lienzo.lineWidth = 1;
    lienzo.moveTo(xinicial,yinicial);
    lienzo.lineTo(xfinal,yfinal);
    lienzo.stroke();
    lienzo.closePath(); //Finalizar el camino
}```



POR FIIIN !!!
Despu茅s de un buen rato investigando y escribiendo se pudo.
Espero todos logren sentir la satisfacci贸n que sentir yo al lograr esto.

Creo que 茅sto le puede a ayudar a alguien o a mi para corregir malos conceptos o pr谩cticas. **El siguiente c贸digo es en relaci贸n al reto del final. **y estar谩 comentado para que sirva de ayuda a otros para completar el reto y me ayuden a mi a consolidar los m铆os.

var cuadro = document.getElementById("areaDibujo"); //Llamo mi canva que le puse en el HTML una ID areaDibujo.
var papel = cuadro.getContext("2d"); //Defino el context.
cuadro.addEventListener("mousedown", lineaInicial); //Cuadro escucha el evento del clic abajo del mouse y ejecuta la funci贸n lineaInicial
cuadro.addEventListener("mouseup", finLinea); //Cuadro escucha el evento clic arriba -soltar- y ejecuta finLinea
cuadro.addEventListener("mousemove", lineaMovimiento); //cuadro escucha el mov del mouse y ejecutas lineaMovimiento.

var colorPincel = "#000"; //El color de la linea.
let mouse = false; // La variable mouse por defecto ser谩 false porque as铆 lo defin铆

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){ //Esta es la funci贸n base del dibujo.
    lienzo.beginPath();
    lienzo.strokeStyle= colorPincel; //Cambi茅 esta variable por otro nombre
    lienzo.lineWidth = 1;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

function lineaInicial(){ //Linea inicial me cambia el false por defecto a true.
    mouse = true;
}

function finLinea(){ //Esta funci贸n me vuelve a poner al mouse como nulo, es decir false.
    mouse = false;
}
function lineaMovimiento(event){ //Esta funci贸n dice 
    if(mouse == true){ //Si mouse es true -es decir si est谩 siendo mousedown, va a dibujar.
        dibujarLinea("colorPincel", event.layerX - 1, event.layerY - 1, event.layerX + 1, event.layerY + 1, papel);
    } //Como dibujar谩
}```



DESPU脡S DE CASI UN MES 鈥 Pero aqu铆 estamos aun, aprendiendo andamos.

Pensando seriamente en agregarle la opci贸n de GUARDAR dibujo, osea que no se borre en cada REFRESH, solo cuando se presione el bot贸n RESET (borrar), acepto APORTACIONES

document.addEventListener('mousemove', drawMove);
document.addEventListener('mousedown', presionado);
document.addEventListener('mouseup', despresionado);
var boton = document.getElementById('btn').addEventListener('click', deleteDraw);

var lienzo = document.getElementById('area_dibujo');
var paper = lienzo.getContext('2d');

var colorcito;

var toDraw = false;
function presionado() {
  toDraw = true;
}
function despresionado() {
  toDraw = false
}

//INVOCANDO LOS ELEEMENTOS/COLORES DE HTML

var colorCafe = document.getElementById('cafe');
var CCafe = colorCafe.addEventListener('click', cafecito);
function cafecito() {
  colorcito = '#BA4A00';
}
var colorAzul = document.getElementById('azul');
var CAzul = colorAzul.addEventListener('click', azulito);
function azulito() {
colorcito = '#3498DB';
}
var colorVerde = document.getElementById('verde');
var CVerde = colorVerde.addEventListener('click', verdesito);
function verdesito() {
  colorcito = '#229954';
}
var colorRojo = document.getElementById('rojo');
var CRojo = colorRojo.addEventListener('click', rojito);
function rojito() {
  colorcito = '#E74C3C';
}
var colorAmarillo = document.getElementById('amarillo');
var CAmarillo = colorAmarillo.addEventListener('click', amarillito);
function amarillito() {
  colorcito = '#F1C40F';
}

//FUNCION PARA DIBUJAR
function drawMove(evento) {
  if (toDraw == true) {
    var x = evento.layerX;
    var y = evento.layerY;
    drawLines(colorcito, x, y, x-1, y-1, paper);
  }
}


//FUNCION PARA DIBUJAR TRAZOS
function drawLines(color, xInicial, yInicial, xFinal, yFinal, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 5;
  lienzo.moveTo(xInicial, yInicial);
  lienzo.lineTo(xFinal, yFinal);
  lienzo.stroke();
  lienzo.closePath();
}

//FUNCION PARA BORRAR DIBUJO
function deleteDraw(evento) {
  paper.clearRect(0, 0, lienzo.width, lienzo.height);
}

Al comienzo tuve que guiarme un poco por algunos de los aportes, pero lo logr茅 y adem谩s a帽ad铆 alguna funcionalidad extra, esto es lo que llevo hasta el momento

Por fin logre el desaf铆o, admito que se me dificulto un poco.

    <head>
        <title>Vamos a dibujar con el mouse</title>
        <meta charset="UTF-8" />
        <style type="text/css" >
         body
         {
         font-family:Helvetica;
         }
         p
         {
         font-family:'Segoe UI';  
         }
        
        </style>
    </head>
    <body onload="init()">
        <h1 style="position: absolute; top: 2%; left: 2%;">Dibuja haciendo click con el mouse!</h1>
        <canvas id="can" width="420" height="420" style="position:absolute; top:20%; left:5%; border:3px solid;"></canvas>
        <div style="position:absolute; top:20%; left:39%;">Elije un color</div>
        <div style="position:absolute; top:23%; left:39%; width:12px; height:12px; background:green;"  id="green"   onclick="color(this)"></div>
        <div style="position:absolute; top:26%; left:39%; width:12px; height:12px; background:blue;"   id="blue"    onclick="color(this)"></div>
        <div style="position:absolute; top:29%; left:39%; width:12px; height:12px; background:red;"    id="red"     onclick="color(this)"></div>
        <div style="position:absolute; top:32%; left:39%; width:12px; height:12px; background:yellow;" id="yellow"  onclick="color(this)"></div>
        <div style="position:absolute; top:35%; left:39%; width:12px; height:12px; background:orange;" id="orange"  onclick="color(this)"></div>
        <div style="position:absolute; top:38%; left:39%; width:12px; height:12px; background:black;"  id="black"   onclick="color(this)"></div>
        <div style="position:absolute; top:42%; left:39%;">Borrador</div>
        <div style="position:absolute; top:45%; left:39%; width:15px; height:15px; background:white;border:2px solid;" id="white" onclick="color(this)"></div>
        <img id="canvasimg" style="position:absolute; top:10%; left:52%;"  style="display:none;">
        <input type="button" value="Guardar"  id="btn" size="30" onclick="save()"  style="position:absolute; top:16%; left:5%;">
        <input type="button" value="Borrar"   id="clr" size="23" onclick="erase()" style="position:absolute; top:16%; left:11%;">
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p style="position: absolute; top: 83%; left: 13%;">As铆 esta quedando tu dibujo</p>
        <script type="text/javascript">
            var canvas, ctx, flag = false,
                prevX = 0,
                currX = 0,
                prevY = 0,
                currY = 0,
                dot_flag = false;
        
            var x = "black";
            var y = 2;
            
            function init() 
            {
                canvas = document.getElementById('can');
                ctx = canvas.getContext("2d");
                w = canvas.width;
                h = canvas.height;
            
                canvas.addEventListener("mousemove", function (e)
                {
                 findxy('move', e)
                },
                false);
                canvas.addEventListener("mousedown", function (e) 
                {
                 findxy('down', e)
                },
                false);
                canvas.addEventListener("mouseup", function (e)
                {
                 findxy('up', e)
                },
                false);
                canvas.addEventListener("mouseout", function (e) {
                    findxy('out', e)
                },
                false);
            }
            
            function color(obj) 
            {
                switch (obj.id)
                {
                    case "green":
                        x = "green";
                        break;
                    case "blue":
                        x = "blue";
                        break;
                    case "red":
                        x = "red";
                        break;
                    case "yellow":
                        x = "yellow";
                        break;
                    case "orange":
                        x = "orange";
                        break;
                    case "black":
                        x = "black";
                        break;
                    case "white":
                        x = "white";
                        break;
                }
                if (x == "white") y = 14;
                else y = 2;
            }
            
            function draw() 
            {
             ctx.beginPath();
             ctx.moveTo(prevX, prevY);
             ctx.lineTo(currX, currY);
             ctx.strokeStyle = x;
             ctx.lineWidth = y;
             ctx.stroke();
             ctx.closePath();
            }
            
            function erase() 
            {
             var m = confirm("Want to clear");
             if (m) 
             {
              ctx.clearRect(0, 0, w, h);
              document.getElementById("canvasimg").style.display = "none";
             }
            }
            
            function save()
            {
             document.getElementById("canvasimg").style.border = "2px solid";
             var dataURL = canvas.toDataURL();
             document.getElementById("canvasimg").src = dataURL;
             document.getElementById("canvasimg").style.display = "inline";
            }
            
            function findxy(res, e) 
            {
             if (res == 'down') 
              {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
            
                flag = true;
                dot_flag = true;

                if (dot_flag) 
                {
                 ctx.beginPath();
                 ctx.fillStyle = x;
                 ctx.fillRect(currX, currY, 2, 2);
                 ctx.closePath();
                 dot_flag = false;
                }
              }
             if (res == 'up' || res == "out")
             {
              flag = false;
             }
             if (res == 'move')
             {
              if (flag)
              {
               prevX = currX;
               prevY = currY;
               currX = e.clientX - canvas.offsetLeft;
               currY = e.clientY - canvas.offsetTop;
               draw();
              }
             }
            }
        </script>
    </body>
</html> 

Fue una noche entera de desvelo, pero creo que vali贸 la pena





HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando flechas</title>
  </head>
  <body>
    <h1>Dibujo en canvas</h1>
    Color para el <strong>TECLADO</strong>:
    <input type="color" id="colorcitoUno" value=#008f39 /><br/>
    <p></p>
    Color para el <strong>MOUSE</strong>:
    <input type="color" id="colorcitoDos" value=#77DD77 /><br/>
    <p></p>
    <canvas id="area_de_dibujo" width="300" height="300" /></canvas><br/>
    <input type="button" value="Borrar" id="botoncitoBorrar" /><br/>
    <script type="text/javascript" src="eventos.js"></script>
    <p>Mueve las flechas del teclado para dibujar o dibuja con el mouse</p>
  </body>
</html>```
**JS**


document.addEventListener(鈥渒eydown鈥, dibujarTeclado);

var cuadrito = document.getElementById(鈥渁rea_de_dibujo鈥);
var papel = cuadrito.getContext(鈥2d鈥)
var ancho = cuadrito.width;

var botonBorrar = document.getElementById(鈥渂otoncitoBorrar鈥);
var colorUno = document.getElementById(鈥渃olorcitoUno鈥);
var colorDos = document.getElementById(鈥渃olorcitoDos鈥);

cuadrito.addEventListener(鈥渕ousedown鈥, dibujando);
cuadrito.addEventListener(鈥渕ouseup鈥, dibujando);
botonBorrar.addEventListener(鈥渃lick鈥, borrarPorClick);

var x = 150;
var y = 150;
var dibujandoMouse;

var teclas =
{
UP:38,
DOWN:40,
LEFT:37,
RIGHT:39
};

borrarPorClick();

function dibujarLinea(color, xInicial, yInicial, xFinal, yFinal, lienzo)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = 3;
lienzo.moveTo(xInicial, yInicial);
lienzo.lineTo(xFinal, yFinal);
lienzo.stroke();
lienzo.closePath();
}

function dibujando(evento)
{
if(evento.type==鈥渕ousedown鈥)
{
dibujandoMouse=true;
}
else
{
dibujandoMouse=false;
}
cuadrito.addEventListener(鈥渕ousemove鈥, dibujarMouse);
}

function dibujarMouse (evento)
{
if (dibujandoMouse)
{
xMouse = evento.layerX;
yMouse = evento.layerY;
dibujarLinea(colorDos.value, xMouse, yMouse, xMouse-1, yMouse-1, papel);
}
}

function dibujarTeclado(evento)
{
var movimiento = 1;
switch (evento.keyCode) {
case teclas.UP:
dibujarLinea(colorUno.value, x, y, x, y - movimiento, papel);
y -= movimiento;
break;
case teclas.DOWN:
dibujarLinea(colorUno.value, x, y, x, y + movimiento, papel);
y += movimiento;
break;
case teclas.LEFT:
dibujarLinea(colorUno.value, x, y, x - movimiento, y, papel);
x -= movimiento;
break;
case teclas.RIGHT:
dibujarLinea(colorUno.value, x, y, x + movimiento, y, papel);
x += movimiento;
break;
default:
console.log(鈥淥tra tecla鈥);
}
}

function borrarPorClick()
{
x = 150;
y = 150;
cuadrito.width = cuadrito.width;
dibujarLinea(鈥渞ed鈥, x-1, y-1, x+1, y+1, papel);
dibujarLinea(鈥渂lack鈥, 1, 1, 1, ancho-1,papel);
dibujarLinea(鈥渂lack鈥.value, 1, ancho-1, ancho-1, ancho-1,papel);
dibujarLinea(鈥渂lack鈥.value, ancho-1, 1, 1, 1,papel);
dibujarLinea(鈥渂lack鈥.value, ancho-1, 1, ancho-1, ancho-1,papel);
}

Les comparto como me quedo.

document.addEventListener(鈥渒eyup鈥,dibujarTeclado);
document.addEventListener(鈥渕ousemove鈥,dibujaMouse);
document.addEventListener(鈥渕ousedown鈥,activaMouse);
document.addEventListener(鈥渕ouseup鈥,desactivaMouse);
var cuadrito = document.getElementById(鈥渁rea_de_dibujo鈥);
var papel = cuadrito.getContext(鈥2d鈥);
var paletas = document.getElementById(鈥淧aleta鈥)
var color = paletas.value;
var x = 150;
var y = 150;
var dif = 0.5;
var Dibujando;
dibujarLinea(鈥渞ed鈥, 149, 149, 151, 151, papel)
var ACTIVAR;
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = 3;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}

function activaMouse(activa)
{
return Dibujando= true;
}

function desactivaMouse(desactiva)
{
Dibujando= false;
}

function dibujaMouse(mouse)
{
x = mouse.layerX;
y = mouse.layerY;
var colorcito = paletas.value;
if (Dibujando == true) {
dibujarLinea(colorcito, x - dif, y - dif, x + dif, y + dif, papel);
}

}

Al fin lo termine!!! Que laburo CHINOOOOO!!!

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css">
    <title>Experimento de dibujo</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="mouse_3.js"></script>
  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#canvas
{
  border: 2px solid black;
}

JS

window.addEventListener("load",() => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  let painting = false;

  function starPosition(e)
  {
      painting = true;
      draw(e);
  }

  function finishedPosition()
  {
    painting = false;
    ctx.beginPath();
  }

  function draw(e)
  {
    if (!painting) return;
    ctx.lineWidth = 20;
    ctx.lineCap = "round";
    ctx.strokeStyle = "red";
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
  canvas.addEventListener("mousedown", starPosition);
  canvas.addEventListener("mouseup", finishedPosition);
  canvas.addEventListener("mousemove", draw);
});

![](

Mi aporte,
Permite dibujar con las flechas del teclado y/o con el mouse, ademas permite limpiar el lienzo, cambiar el color y el tama帽o del trazo sobre la marcha , sin necesidad de recargar la p谩gina.

2 Comentarios abajo pueden encontrar los detalles del c贸digo

Me compromet铆 a no avanzar hasta que lo consegu铆, lo unico que no conoc铆a era el evento 鈥渕ousemove鈥, pero inicialmente estaba funcionando con lineas rectas con mouseup (ver comentario en c贸digo). Estupendo!



隆Me tard茅 dos semanas pero al fin aqu铆 est谩!
Me siento feliz y motivada ^^

Este es mi resultado con las flechas del teclado鈥 Lo que no pude lograr fue hacer las lineas en diagonal al presionar dos teclas a la vez鈥 Si alguien me da una pista se lo agradecer铆a (y)

Si te gusta el curso dale like al comentario.

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
cuadrito.addEventListener("mousedown", dibujarClick);
cuadrito.addEventListener("mouseup", dibujarClick);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarClick(evento)
{
  if(evento.type=="mousedown"){
    xi = evento.layerX;
    yi = evento.layerY;
    cuadrito.addEventListener("mousemove", dibujarClick);
  }
  if(evento.type=="mousemove"){    
    xf = evento.layerX;
    yf = evento.layerY;
    dibujarLinea("purple",xi,yi,xf,yf,papel );
    xi = xf;
    yi = yf;
  }
  if(evento.type=="mouseup"){
    cuadrito.removeEventListener("mousemove", dibujarClick);
  } 
}

LES COMPARTO MI CODIGO, LE AGREGUE COMENTARIOS PARA QUE SE LES FACILITE AUN M脕S, COPIEN Y PEQUEN EN ATOM PARQ EU LO VEAN MEJOR, NO PUDE SUBIR FOTO.

document.addEventListener(鈥渕ouseup鈥, deshabilita); //observa cuando se levanta el click y llama a ala funcion deshabilita
document.addEventListener(鈥渕ousedown鈥, habilita); // observa cuando se hace el click y llama a la funcion habilita
document.addEventListener(鈥渕ousemove鈥, trayecto); // observa el movimiento del mouse y llama o invoca a la funcion trayecto

var hoja = document.getElementById(鈥渉oja_de_dibujo鈥); // asignamos a la variable hoja los elementos del canvas puestos en html
var dibujo = hoja.getContext(鈥2d鈥); //a la variable dibujo le asignamos el canvas que ahora pertence a hoja en un getContext 2d

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo) //Esta funci贸n funciona en cualquier parte del codigo pero solo en JavaScript
{
lienzo.beginPath(); //inicia el dibujo
lienzo.strokeStyle = color; //atributo o propiedad del objeto e indica el color
lienzo.lineWidth = 3; // define el grueso de la linea en este caso tres pixeles
lienzo.moveTo(xinicial, yinicial); //define el primer punto
lienzo.lineTo(xfinal, yfinal); // traza una linea desde el primer punto
lienzo.stroke(); //funcion que dibuja la linea en este caso linea roja
lienzo.closePath(); // indica que cierra el dibujo
}

function dibujoPorClick(evento) // funcion dibujoPorClick
{
var c = 鈥渞ed鈥; // se asgina a c el color
var movimiento = 1; // se le asigna a movimiento el valor del pixel este caso 1 cada que se mueva
var x = evento.layerX; // a x se le asgina la posicion del mouse antes del click en el eje x
var y = evento.layerY; // a y se le asigina el valor del mouse en eje de las y antes del click
dibujarLinea(c, x, y, x+movimiento, y+movimiento, dibujo); // llamamos a la funcion dibujarLinea
}

function deshabilita() // funcion deshabilita
{
console.log(鈥淪olto el click鈥); //Mensaje de referencia dentro de la consola
hoja.removeEventListener(鈥渕ousemove鈥, dibujoPorClick); // quita la funcion dibujoPorClick para que no siga dibujando al soltar el click
}

function habilita() // funcion habilita
{
console.log(鈥渉izo click鈥); // Mensaje de referencia dentro de la consola
hoja.addEventListener(鈥渕ousemove鈥, dibujoPorClick); // Ejecuta la funcion dibujoPorClick mientras halla un click y se mueva el mouse
}

function trayecto()// funcion trayecto
{
console.log(鈥渟e mueve el mouse鈥); //indica en la consola por donde pasa el mouse aunque no se ejecute un click
}

Me propuse el reto y pude lograrlo鈥
Con todo las clases del curso de programaci贸n b谩sica forme una p谩gina sencilla con una calculadora (solo suma), dibujo en canvas con las flechas del teclado y dibujar un gr谩fico en base alas l铆neas deseas鈥 Me tomo tiempo pero lo hice鈥
Tal vez no es algo impresionante a simple vista pero el esfuerzo lo compensa ^_^

Decid铆 aumentar un poco el c贸digo, darle mas opciones, y ya cambia de colores con las teclas y el grosor del pincel tambien:

El c贸digo de js es:

var l = document.getElementById("ellienzo");
var dibujo = l.getContext("2d");
var posicion = l.getBoundingClientRect(); //trae los limites y tama帽o del canvas
var alaX = posicion.left;//posici贸n x del canvas al borde de la pagina (izquierda)
var alaY = posicion.top;//posici贸n y del canvas al borde de la pagina (arriba)
var colorPincel = "springgreen";
var anchoAnterior, anchoPincel = 4;
var borrador = false;

document.addEventListener("mousemove", dibujar);

function dibujar(raton) {
    if (raton.buttons == 1) {//cuando esta presionado el boton dibuja la linea
        x =  raton.clientX - alaX;//coordenada x real del puntero en el canvas
        y =  raton.clientY - alaY;//coordenada x real del puntero en el canvas
        dibujaLinea(colorPincel, x, y, x - raton.movementX, y - raton.movementY, anchoPincel, dibujo);
      }
}
function dibujaLinea(color, xIni, yIni, xFin, yFin, ancho, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = ancho;
  lienzo.moveTo (xIni, yIni);
  lienzo.lineTo (xFin, yFin);
  lienzo.stroke();
  lienzo.closePath();
}

//Hasta aqu铆 el c贸digo para dibujar, de aqui en adelante cambiar colores y grosor
document.addEventListener("keydown", cambiaPincel);

function cambiaPincel (tecla) {
  if (borrador) {
    anchoPincel = anchoAnterior; //Si esta borrando el tama帽o del pincel debe
  }                            //ser el anterior,
  switch (tecla.key.toLowerCase()) {
    case "a": colorPincel = "springgreen"  ; borrador = false; break;
    case "s": colorPincel = "yellow"       ; borrador = false; break;
    case "d": colorPincel = "deeppink"     ; borrador = false; break;
    case "f": colorPincel = "aqua"         ; borrador = false; break;
    case "g": colorPincel = "magenta"      ; borrador = false; break;
    case "h": colorPincel = "lime"         ; borrador = false; break;
    case "j": colorPincel = "blue"         ; borrador = false; break;
    case "k": colorPincel = "red"          ; borrador = false; break;
    case "l": colorPincel = "greenyellow"  ; borrador = false; break;
    case "帽": colorPincel = "white"        ; borrador = false; break;

    case "q": colorPincel = "HoneyDew"     ; break;
    case "w": colorPincel = "Beige"        ; break;
    case "e": colorPincel = "Azure"        ; break;
    case "r": colorPincel = "AliceBlue"    ; break;
    case "t": colorPincel = "GhostWhite"   ; break;
    case "y": colorPincel = "LavenderBlush"; break;
    case "u": colorPincel = "AntiqueWhite" ; break;
    case "i": colorPincel = "MistyRose"    ; break;
    case "o": colorPincel = "SeaShell"     ; break;

    case "1": anchoPincel = 0.5; break;
    case "2": anchoPincel = 1; break;
    case "3": anchoPincel = 2; break;
    case "4": anchoPincel = 3; break;
    case "5": anchoPincel = 4; break;
    case "6": anchoPincel = 6; break;
    case "7": anchoPincel = 10; break;
    case "8": anchoPincel = 16; break;
    case "9": anchoPincel = 24; break;

    case "delete": colorPincel = "black";          //La opcion de borrar es distinta, porque
      if (!borrador) {anchoAnterior = anchoPincel} //cuando se quite, debe volver
      anchoPincel = 15; borrador=true;             // al tama帽o del pincel anterior
    break;

    default: if (borrador) {anchoPincel = 15}
  }
  console.log(tecla);
}
//Unas rayitas para ver el contorno del lienzo
var ancho = l.width;
var alto = l.height;
dibujaLinea("#696969",100,0,0,0,1,dibujo);
dibujaLinea("#696969",0,100,0,0,1,dibujo);
dibujaLinea("#696969",ancho,0,ancho-100,0,1,dibujo);
dibujaLinea("#696969",ancho,0,ancho,100,1,dibujo);
dibujaLinea("#696969",ancho,alto,ancho,alto-100,1,dibujo);
dibujaLinea("#696969",ancho,alto,ancho-100,alto,1,dibujo);
dibujaLinea("#696969",0,alto,0,alto-100,1,dibujo);
dibujaLinea("#696969",0,alto,100,alto,1,dibujo);

//****** y el codigo de html:

<!DOCTYPE html>
<html lang="es" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Dibujando en un Lienzo con el Rat贸n </title>
    <style media="screen" type="text/css">
      body {
        background-color: black;
        font-family: Helvetica;
        color: #696969;
      }
    </style>
  </head>

  <body>
    <h1>Lienzo Ne贸n para Mouse</h1>
    <canvas id="ellienzo" width="1200" height="700"> </canvas>
    <p><strong>Tinta Ne贸n:</strong>  A S D F G J K L <br>
    <strong>Tinta Pastel:</strong> Q W E R T Y U I O <br>
    <strong>Grosor del Pincel:</strong> numeros del 1 al 9 <br>
    <strong>Limpiar el Lienzo:</strong> refrescar el navegador <br>
    <strong>Activar Borrador:</strong> tecla suprimir <br>
    <strong>Desactivar Borrador:</strong> Cualquier Tinta</p>
    <script type="text/javascript" src="mouse.js"> </script>
  </body>

</html>


![](

// Canvas
var cuadrito = document.getElementById("area_de_dibujo");

// EventListeners
cuadrito.addEventListener("mousedown", activarMouse);
cuadrito.addEventListener("mouseup", desactivarMouse);
cuadrito.addEventListener("mousemove", dibujarMouse);

// Contexto de Dibujo
var papel = cuadrito.getContext("2d");

// 'X' y 'Y' inicial y estado de mouse (S铆 esta presionado o no)
var xIncial;
var yInicial;
var estadoMouse = false;

// Activa el mouse
function activarMouse(evento) {
  estadoMouse = true;
  xIncial = evento.clientX;
  yInicial = evento.clientY;
}

// Desactiva el mouse
function desactivarMouse() {
  estadoMouse = false;
}

// Funci贸n para dibujar
function dibujarMouse(evento) {
  var xFinal = evento.clientX;
  var yFinal = evento.clientY;
  colorcito = "#333";

  if (estadoMouse) {
    dibujarLinea("colorcito", xIncial, yInicial, xFinal, yFinal, papel);

    xIncial = xFinal;
    yInicial = yFinal;
  }
}

// Dibujo de Lineas
function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}

Ac谩 dejo mi versi贸n del c贸digo:
dibujando.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dibujando en canvas</title>
    <style>
        body{
            background-color: #000000;
            color: #d3d3d3;
        }
        div{
            margin: 3px 0px 3px 0px;
            text-align: center;
        }
        canvas{
            margin: 10px 0px 10px 0px;
            border: 2px solid #90ee90;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <h1>Dibujando con mouse en canvas</h1>
            <p>Manten presionado el boton izquierdo del mouse para dibujar</p>
            <input type="button" value="Grilla" id="grid">
            <input type="button" value="Borrar" id="clear">
        </div>
        <canvas width="400" height="400" id="drawZone"></canvas>
        <div>
            <span>Digita un numero para el ancho del pincel</span>
            <input type="text" id="lineWidth" size="1" value="10">
        </div>
        <div>
            <span>Selecciona un color para el pincel</span>
            <input type="color" id="color" value="#ed9d5b">
        </div>
        <script src="mouse.js"></script>
    </div>
</body>
</html>

dibujando.js

/*
Captura de eventos, definicion de constantes y variables
*/
const drawZone = document.getElementById("drawZone");
const canvas = drawZone.getContext("2d");

document.addEventListener("mousedown",mousedown);
document.addEventListener("mousemove",mousemove);
document.addEventListener("mouseup",mouseup);
document.getElementById("clear").addEventListener("click", clearCanvas);
document.getElementById("grid").addEventListener("click", toggleGrid);

var gridShowed = false;
var color;
var lineWidth;
var mouseClicked;
var x;
var y;

/*
Permite saber en donde se inicio a pintar con el mouse asignando las variables globales de control
*/
function mousedown(params) {

    lineWidth = document.getElementById("lineWidth").value;
    color = document.getElementById("color").value;
    mouseClicked = true;
    x = params.layerX;
    y = params.layerY;
}

/*
Va ejecutando la funcion de pintar a medida que se mueve el mouse y mientras que el click este presionado
*/
function mousemove(params) {

    if (mouseClicked) {
        draw([x,y,params.layerX,params.layerY]);
        x = params.layerX;
        y = params.layerY;
    }
}

/*
Permite saber en donde se termina de pintar con el mouse asignando las variables globales de control
*/
function mouseup() {

    mouseClicked = false;
}

/*
Dibuja lineas en el canvas a partir de las coordenadas recibidas
*/
function draw(coordinates){

    canvas.beginPath();
    canvas.lineWidth = lineWidth;
    canvas.strokeStyle = color;
    canvas.moveTo(coordinates[0],coordinates[1]);
    canvas.lineTo(coordinates[2],coordinates[3]);
    canvas.stroke();
    canvas.closePath();
}

/*
Limpia el canvas dejandolo listo para pintar
*/
function clearCanvas() {

    canvas.clearRect(0,0,drawZone.width,drawZone.height);
}

/*
Muestra / oculta la grilla del canvas
*/
function toggleGrid() {

    if (!gridShowed) {
        gridShowed = true;
        lineWidth = 0.5;
        color = "#90ee90";
        draw([100,0,100,400]);
        draw([200,0,200,400]);
        draw([300,0,300,400]);
        draw([0,100,400,100]);
        draw([0,200,400,200]);
        draw([0,300,400,300]);
    }
}

Aca se puede elegir el color y el grosor del pincel, as铆 como dibujar una grilla guia, y esta es la salida:

Cambie un poco el codigo y con mucho esfuerzo y paciencia logre que el usuario escoja el color las veces que quiera y que tambien escoja la distancia de los pixeles cuantas veces quiera; Aqui les dejare una peque帽a muestra y tambien mi codigo de js y html por si lo quieren modificar, ahorita mismo estoy trabajando en el dibujo con el mouse 馃槃



FUE DIFICIL XK FALTO APROFUNDIR MAS ALGUNAS CLASES ANTERIORES PERO BUENO DSPS DE VER VARIOS YOUTUBERS Y LEER MAS YA ACABE MI CODIGO----

var canvas=document.getElementById("area_de_dibujo");
var papel=canvas.getContext("2d");
//papel.fillRect(0, 0, 500, 500);


canvas.addEventListener("mousedown",inicioMouse);
canvas.addEventListener("mousemove",dibujarMouse);
canvas.addEventListener("mouseup",finalMouse);

var x,y;
var a=0;
function inicioMouse(evento_i)
{
  //console.log(evento_i);
  //console.log("estoy aqui x="+evento_i.layerX +" y="+evento_i.layerY);
  //console.log("has apretado el mouse");
   x=evento_i.layerX;
   y=evento_i.layerY;
   a=1;
}

function dibujarMouse(evento_d)
{
  if(a==1)
   {
     var dx=evento_d.layerX;
     var dy=evento_d.layerY;
     var color=document.getElementById("colores").value;//valor del input tipo color
     dibujarlinea(color,x,y,dx,dy,papel);
     x=dx;
     y=dy;
     var color="blue";



   }
}
function finalMouse(evento_f)
{
  a=0;
  console.log(evento_f);
}

function dibujarlinea(color, xinicial, yinicial,xfinal, yfinal,lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle= color;
  lienzo.lineWidth=3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

Aqu铆 les comparto mi versi贸n. Le puse herramientas como L谩piz, Linea, C铆rculo, Rect谩ngulo, Borrador, Clear (Para limpiar todo el Canvas) + y - para incrementar el tama帽o del l谩piz. Adem谩s agregu茅 shortcuts para cada herramienta y shortcuts de n煤meros del 0 al 9 para cambiar colores r谩pidamente (Utilic茅 la web Coolors para elegir una paleta de colores)

github .com/alainrodriguezz/drawing_in_canvas_basic
alain .pro/lab/drawing_in_canvas_basic/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Drawing Board</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		body,html{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			
		}
		#info{
			user-select: none;
			color:lightgray;
			position: absolute;
			top:0;
			left:0;
			margin:5px;
			font-family: sans-serif;
			font-size: 15px;
		}
		canvas{
			position: absolute;
			top: 0;
			left: 0;
		}
		.btn {
			background-color: lightgray;
			border: none;
			color: white;
			padding: 9px 12px;
			border-radius: 3px;
			cursor: pointer;
			font-size: 15px;
		}
		.btn:hover, .btn.active {
			background-color: dodgerblue;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<canvas id="canvas_guide"></canvas> 
	<div id="info">
		<button id="btn_pen" class="btn active"><i class="fa fa-pencil"></i> Pen (P)</button>
		<button id="btn_plus" class="btn"><i class="fa fa-plus"></i></button>
		<button id="btn_minus" class="btn"><i class="fa fa-minus"></i></button>
		  &nbsp;&nbsp;
		<button id="btn_line" class="btn"><i class="fa fa-long-arrow-right"></i> Line (L)</button>
		<button id="btn_rectangle" class="btn"><i class="fa fa-square"></i> Rectangle (R)</button>
		<button id="btn_circle" class="btn"><i class="fa fa-circle"></i> Circle (C)</button>
		<button id="btn_eraser" class="btn"><i class="fa fa-eraser"></i> Eraser (E)</button>
		<button id="btn_clear" class="btn"><i class="fa fa-trash"></i> Clear (Backspace)</button>
		<input id="btn_color" type="color">
		<span>Colors (0,1,...,8,9)</span>
		<p>Use the mouse click to draw. Shorcuts available: P,+,-,L,R,C,E,Backspace,0,1,..,8,9 (Desktop Only)</p>
	</div>
	
	<script type="text/javascript">
		var canvas_tag = document.getElementById('canvas');
		var canvas = canvas_tag.getContext('2d');
		var canvas_guide_tag = document.getElementById('canvas_guide');
		var canvas_guide = canvas_guide_tag.getContext('2d');
		var posX, posY;
		var startX, startY;
		var lastX, lastY;
		var diff = 20;
		var tool = {
			pen: 				'pen',
			line: 			'line',
			rectangle: 	'rectangle',
			circle: 		'circle',
			eraser: 		'eraser',
		}
		var currTool = tool.pen;
		var penSize = 30;
		var eraserSize = 30;
		var maxPenSize = 100;
		var minPenSize = 5
		var color = '#000000';
		var drawing = false;

		//interface
		var btn_pen = document.getElementById('btn_pen');
		var btn_rectangle = document.getElementById('btn_rectangle');
		var btn_circle = document.getElementById('btn_circle');
		var btn_eraser = document.getElementById('btn_eraser');
		var btn_clear = document.getElementById('btn_clear');
		
		window.addEventListener('mousedown',mouseDown);
		window.addEventListener('mousemove',mouseMove);
		window.addEventListener('mouseup',mouseUp);
		window.addEventListener('keydown',keyDown);
		btn_pen.addEventListener(				'click',()=>{ 		currTool = tool.pen; 					activeBtn(); });
		btn_line.addEventListener(			'click',()=>{ 		currTool = tool.line; 				activeBtn(); });
		btn_rectangle.addEventListener(	'click',()=>{ 		currTool = tool.rectangle; 		activeBtn(); });
		btn_circle.addEventListener(		'click',()=>{ 		currTool = tool.circle; 			activeBtn(); });
		btn_eraser.addEventListener(		'click',()=>{ 		currTool = tool.eraser; 			activeBtn(); });
		btn_clear.addEventListener(			'click',()=>{ 		confirmClear();								activeBtn(); });


		function activeBtn() {
			btn_pen.classList.remove('active');
			btn_line.classList.remove('active');
			btn_rectangle.classList.remove('active');
			btn_circle.classList.remove('active');
			btn_eraser.classList.remove('active');

			if(currTool == tool.pen) 					btn_pen.classList.add('active');
			if(currTool == tool.line) 					btn_line.classList.add('active');
			if(currTool == tool.rectangle) 		btn_rectangle.classList.add('active');
			if(currTool == tool.circle) 		btn_circle.classList.add('active');
			if(currTool == tool.eraser) 		btn_eraser.classList.add('active');
		}
		function keyDown(e) {
			var key = e.key;

			if(key == 'p') 	currTool = tool.pen;
			if(key == 'l') 	currTool = tool.line;
			if(key == 'r') 	currTool = tool.rectangle;
			if(key == 'c') 	currTool = tool.circle;
			if(key == 'e') 	currTool = tool.eraser;

			if(key == 1)	color = '#ff5964';
			if(key == 2)	color = '#ffe066';
			if(key == 3)	color = '#35a7ff';
			if(key == 4)	color = '#b5e2fa';
			if(key == 5)	color = '#5bc0be';
			if(key == 6)	color = '#348aa7';
			if(key == 7)	color = '#5dd39e';
			if(key == 8)	color = '#f0a6ca';
			if(key == 9)	color = '#ffffff';
			if(key == 0)	color = '#000000';

			btn_color.value = color;

			if(key == '+') penSize+=5;
			if(key == '-') penSize-=5;
			penSize = Math.min(Math.max(penSize,minPenSize),maxPenSize)

			if(key == 'Backspace') confirmClear();

			refreshPointer();
			activeBtn();
		}

		function confirmClear() {
			if(confirm('Seguro que deseas borrar?')){
				canvas.clearRect(0,0,canvas_tag.width,canvas_tag.height)
			}
		}

		function mouseDown(e) {
			
			startX = posX = lastX = e.clientX;
			startY = posY = lastY = e.clientY;
			drawing = true;
			color = document.getElementById('btn_color').value;
		}

		function mouseMove(e) 
		{
			var mouseX = e.clientX;
			var mouseY = e.clientY;
			
			refreshPointer();

			if(drawing)
			{
				if(currTool == tool.pen)
				{
					if(Math.abs(lastX-mouseX)>diff || Math.abs(lastY-mouseY)>diff)
					{
						canvas.beginPath();
						canvas.strokeStyle = color;
						canvas.lineWidth = penSize;
						canvas.moveTo(lastX,lastY);
						canvas.lineTo(mouseX,mouseY);
						canvas.stroke();
						canvas.closePath();
						lastX = mouseX;
						lastY = mouseY;
					}
				}

				if(currTool == tool.eraser)
				{
					if(Math.abs(lastX-mouseX)>diff || Math.abs(lastY-mouseY)>diff)
					{
						canvas.beginPath();
						canvas.strokeStyle = 'white';
						canvas.lineWidth = eraserSize;
						canvas.moveTo(lastX,lastY);
						canvas.lineTo(mouseX,mouseY);
						canvas.stroke();
						canvas.closePath();
						lastX = mouseX;
						lastY = mouseY;
					}
				}
			}

			posX = mouseX;
			posY = mouseY;
		}
		function mouseUp() {

			if(drawing)
			{
				if(currTool == tool.rectangle) 		drawRectangle(startX,startY,posX-startX,posY-startY);
				if(currTool == tool.circle)				drawCircle(startX,startY,Math.max(Math.abs(startX-posX),Math.abs(startY-posY)));
				if(currTool == tool.line) 				drawLine(startX,startY,posX,posY);
			}
			drawing = false;
			refreshPointer();
		}

		function drawLine(fromX,fromY,toX,toY) {
			canvas.beginPath();
			canvas.arc(startX,startY,penSize/2,0, 2 * Math.PI);
			canvas.fillStyle = color;
			canvas.fill();
			canvas.closePath();

			canvas.beginPath();
			canvas.strokeStyle = color;
			canvas.lineWidth = penSize;
			canvas.moveTo(startX,startY);
			canvas.lineTo(posX,posY);
			canvas.stroke();
			canvas.closePath();	

			canvas.beginPath();
			canvas.arc(toX,toY,penSize/2,0, 2 * Math.PI);
			canvas.fillStyle = color;
			canvas.fill();
			canvas.closePath();
		}

		function drawCircle(x,y,width) {
			canvas.beginPath();
			canvas.arc(x,y,width,0, 2 * Math.PI);
			canvas.fillStyle = color;
			canvas.fill();
			canvas.closePath();	
		}

		function drawRectangle(x,y,width,height) {
			canvas.beginPath();
			canvas.rect(x, y, width, height);
			canvas.fillStyle = color;
			canvas.fill();
			canvas.closePath();	
		}

		function refreshPointer()
		{
			canvas_guide.clearRect(0,0,canvas_guide_tag.width,canvas_guide_tag.height);			//CLEAR

			canvas_guide.beginPath();
			canvas_guide.fillStyle = color;

			if (currTool == tool.pen)
			{
				canvas_guide.arc(posX,posY,penSize/2,0, 2 * Math.PI);
			}
			else if (currTool == tool.line)
			{
				canvas_guide.arc(posX,posY,penSize/2,0, 2 * Math.PI);
				if(drawing)
				{
					canvas_guide.arc(startX,startY,penSize/2,0, 2 * Math.PI);
					canvas_guide.fill();
					canvas_guide.closePath();

					canvas_guide.beginPath();
					canvas_guide.strokeStyle = color;
					canvas_guide.lineWidth = penSize;
					canvas_guide.moveTo(startX,startY);
					canvas_guide.lineTo(posX,posY);
					canvas_guide.stroke();
				} 
			}
			else if (currTool == tool.rectangle)
			{
				canvas_guide.rect(posX-5, posY-5, 10, 10);
				if(drawing) canvas_guide.rect(startX, startY, posX-startX, posY-startY);
			}
			else if (currTool == tool.circle)
			{
				canvas_guide.arc(posX,posY,5,0, 2 * Math.PI);
				if(drawing) canvas_guide.arc(startX,startY,Math.max(Math.abs(startX-posX),Math.abs(startY-posY)),0, 2 * Math.PI);
			}
			else if (currTool == tool.eraser)
			{
				canvas_guide.fillStyle = '#ffffff';
				canvas_guide.strokeStyle = '#000000';
				canvas_guide.lineWidth = 2;
				canvas_guide.arc(posX,posY,eraserSize/2,0, 2 * Math.PI);
				canvas_guide.stroke();
			}

			canvas_guide.fill();
			canvas_guide.closePath();
		}

		function onResize() {
			canvas_tag.width = window.innerWidth;
			canvas_tag.height = window.innerHeight;
			canvas_guide_tag.width = window.innerWidth;
			canvas_guide_tag.height = window.innerHeight;
		}
		onResize();
	</script>
</body>
</html>```

馃槂

![](

Termine lo de dibujar con teclas y se lo mostr茅 a mi hija鈥 Qued贸 encantada jajaja! Ahora dice que quiere dibujar con mouse pero ese aun no me queda y me pregunta que si ya logr茅 resolverlo!! jijijj lo har茅 por ella :3

Para dibujar con el mouse

As铆 me quedo al final:

Este es el HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dibujando con mouse</title>
        <style type="text/css">
            body
              {
                font-family: Calibri;
              }
            </style>
    </head>
    <body>
        <h1>Haz click y mueve el mouse para dibujar</h1>
        <p><strong>Dibuja dentro del area del recuadro</strong></p>
        <canvas width="500" height="500" id="area_de_dibujo"></canvas>
        <p>
            Selecciona el color con el que deseas dibujar:
            <input type="color" id="color_dibujo" />
            <br>
            Puedes borrar partes del dibujo seleccionando el color blanco y dibujando
            <br>
            <br>
            Selecciona el grosor de linea (1-10):
            <input type="range" min="1" max="10" id="stroke_line" />
            <br>
            <br>
            Si quieres volver a empezar:
            <input type="button" value="Borrar todo el dibujo" onclick="location.reload()">
        </p>
        <script src="mouse.js"></script>    
    </body>
</html>

Este es el JS

document.addEventListener("mousedown", empezarDibujarMouse);
document.addEventListener("mousemove", moverMouse);
document.addEventListener("mouseup", finalizarDibujarMouse);

var colorUser = document.getElementById("color_dibujo");
var strokeLine = document.getElementById("stroke_line");
var cuadrado = document.getElementById("area_de_dibujo");
var papel = cuadrado.getContext("2d");
var dibujar;

//Dibujar el marco del dibujo
dibujarLinea("black", 1, 1, 499, 1, papel);
dibujarLinea("black", 499, 1, 499, 499, papel);
dibujarLinea("black", 1, 1, 1, 499, papel);
dibujarLinea("black", 1, 499, 499, 499, papel);

//Funcion para dibujar lineas
function dibujarLinea(color, x_i, y_i, x_f, y_f, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = strokeLine.value;
  lienzo.moveTo(x_i, y_i);
  lienzo.lineTo(x_f, y_f);
  lienzo.stroke();
  lienzo.closePath();
}

function empezarDibujarMouse(evento)
{
    dibujar = true;
    xi = evento.layerX;
    yi = evento.layerY;
}

function moverMouse(evento)
{
    if (dibujar)
    {
        var colorin = colorUser.value;
        xf = evento.layerX;
        yf = evento.layerY;
        dibujarLinea (colorin, xi, yi, xf, yf, papel);
        xi = evento.layerX;
        yi = evento.layerY;
    }
}

function finalizarDibujarMouse(evento)
{
    dibujar = false;
}

Despu茅s de casi UN MES de investigaci贸n, pruebas y embarradas, oficialmente termine el desaf铆o. A帽ad铆 nuevas caracter铆sticas para hacerlo mas amigable y confiable.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Dibujando con Mouse</title>
</head>

<body>
  <style type="text/css">
    body {
      background-image: url("GradientBlueImageV3.gif");
      height: 1000px;
      background-repeat: repeat;
      background-position: center;
      background-size: cover;
    }

    H1.Dibujando_en_Canvas {
      text-shadow: 4px 4px rgb(0, 204, 240);
      line-height: 50%;
      color: rgb(0, 90, 143);
      font-size: 60pt;
      font-family: "Century Gothic", sans-serif;
    }

    p.basic {
      line-height: 150%;
      color: rgb(255, 255, 255);
      font-size: 15pt;
      font-family: "Monaco", monospace;
    }

    p.libera {
      line-height: 50%;
      color: rgb(0, 255, 255);
      font-size: 30pt;
      font-family: Consolas;
    }

    canvas {
      border-radius: 60px;
      background-color: rgb(241, 241, 241);
      padding-left: 0;
      padding-right: 0;
      margin-left: auto;
      margin-right: auto;
      display: block;
      width: 1000px;
    }

    .botoncito {
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.719);
      border: 2px solid rgb(0, 170, 255);
      height: 35px;
      width: 35px;
    }
  </style>
  <div style="text-align: center">
    <h1 class=Dibujando_en_Canvas><strong>Dibujando con el Mouse</strong></h1>
    <p class="libera"><strong>Libera tu imaginaci贸n!</strong></p>
    <canvas width="1000px" height="500px" id="area_de_desarrollo"></canvas>
    <p class="basic"><i> Escoge el color a tu gusto.</i></p>
    <input type="color" id="colorcito"></input>
    <p class="basic"><i> Escoge el grosor de tu l铆nea.</i></p>
    <input class="grosor" type="range" id="grosor_linea" oninput="grosor_linea(this.value);" min="3" max="30"
      value="1"></input> </br>
    <p class="basic"><i>Limpia tu area de dibujo.</i></p>
    <input type="button" class="botoncito " id="boton_determinante">
  </div>
  <script src=scriptllenge.js></script>
</body>

</html>

JAVASCRIPT

var color = document.getElementById("colorcito");
var perimetro_de_dibujo = document.getElementById("area_de_desarrollo");
var perimetro_final_de_dibujo = perimetro_de_dibujo.getContext("2d");
var thick = document.getElementById("grosor_linea");
var limpiador_activado = document.getElementById("boton_determinante");
var x;
var y;

limpiador_activado.addEventListener("click", limpiarClick);
perimetro_de_dibujo.addEventListener("mousedown", elClick);
perimetro_de_dibujo.addEventListener("mousemove", moverElClick);
perimetro_de_dibujo.addEventListener("mouseup", finalClick);

// En la parte inferior esta todo lo relacionado a las funciones.
function dibujandoLasLineas(color, xini, yini, xfin, yfin) {
  perimetro_final_de_dibujo.lineWidth = thick.value;
  perimetro_final_de_dibujo.strokeStyle = color;
  perimetro_final_de_dibujo.lineJoin = "bevel";
  perimetro_final_de_dibujo.beginPath();
  perimetro_final_de_dibujo.moveTo(xini, yini);
  perimetro_final_de_dibujo.lineTo(xfin, yfin);
  perimetro_final_de_dibujo.stroke();
  perimetro_final_de_dibujo.closePath();
}

function elClick(evento) {
  evento.buttons = 1;
  x = evento.layerX;
  y = evento.layerY;
}

function moverElClick(evento) {
  if (evento.buttons == 1) {
    dibujandoLasLineas(color.value, x, y, evento.layerX, evento.layerY);
    x = evento.layerX;
    y = evento.layerY;
  } else {
    x = evento.layerX;
    y = evento.layerY;
  }
}

function finalClick(evento) {
  estado_del_click = 0;
}

function limpiarClick(evento) {
  perimetro_final_de_dibujo.clearRect(0, 0, perimetro_de_dibujo.width, perimetro_de_dibujo.height);
}
*隆Fuck yeah!* Con constancia y ganas de aprender todo se puede

Se帽ores Platzi, cordial saludo.

En anterior aporte envi茅 la resoluci贸n completa del dibujo hecho en Canvas sobre la 鈥淔lor de la Vida鈥. Considero pertinente para aclarar y ampliar la forma de hacer este dibujo, enviar una de las versiones realizada para lograr el resultado mostrado. Para ello env铆o los archivos e im谩genes previas, as铆:

Imagen.

Comandos HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LA FLOR DE VIDA</title>
  </head>
  <body>
    <h1>DIBUJANDO LA FLOR DE LA VIDA CON CANVAS</h1>
    <h4>Henryalirio</h4>
    <P> Cuantas divisiones de la circunferencia?
    <input = type="text" id="textoLineas"/>
    <input = type="button" value="A DIBUJAR!" id="botoncito"/></p>
    <canvas width="720" height="800" id="florecita"> </canvas>
    <p> Asi queda La Flor de la Vida</p>
    <script src="flordevida_3.js"></script>
  </body>
</html>

Lenguaje de Programaci贸n en JavaScript:

var texto = document.getElementById("textoLineas");
var boton = document.getElementById("botoncito");

boton.addEventListener("click", dibujarCircunferenciaPorClick);

var d = document.getElementById("florecita");
var ancho = d.width;
var alto = d.height
var lienzo = d.getContext("2d");

function dibujarLinea(color, xi, yi, xf, yf)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xi, yi);
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}

dibujarLinea("black", 0, 0, 0, alto);
dibujarLinea("red", 0, alto, ancho, alto);
dibujarLinea("blue", ancho, alto, ancho, 0);
dibujarLinea("green", ancho, 0, 0, 0);

var x1 = 100;
var x2 = 186.6;
var x3 = 273.21;
var x4 = 359.81;
var x5 = 446.41;
var x6 = 533.01;
var x7 = 619.62;

var y1 = 100;
var y2 = 150;
var y3 = 200;
var y4 = 250;
var y5 = 300;
var y6 = 350;
var y7 = 400;
var y8 = 450;
var y9 = 500;
var y10 = 550;
var y11 = 600;
var y12 = 650;
var y13 = 700;

var radio1 = 100;
var radio2 = 300;

var color1 = "FFFFFF"
var color2 = "#FFA500"
var color3 = "#FF4500"
var color4 = "#B8860B"
var color5 = "#8B4513"
var color6 = "#00FF00"
var color7 = "red"
var color8 = "black"

function dibujarCircunferenciaPorClick()
  {

  var xcentro = x4;
  var ycentro = y7;
  var color = color8;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x3;
  var ycentro = y6;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x3;
  var ycentro = y8;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x4;
  var ycentro = y5;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x4;
  var ycentro = y9;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x5;
  var ycentro = y6;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x5;
  var ycentro = y8;
  var color = color2;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x2;
  var ycentro = y7;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;
    for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
  }
  var xcentro = x3;
  var ycentro = y4;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
  {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
  }
  var xcentro = x3;
  var ycentro = y10;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
  }

  var xcentro = x5;
  var ycentro = y4;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
  }

  var xcentro = x5;
  var ycentro = y10;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;
  for(l = 0; l <= divisiones; l++)
  {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
  }
  var xcentro = x6;
  var ycentro = y7;
  var color = color3;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
  {
  var angulo = 2 * Math.PI * l / divisiones;
  xf = xcentro + radio * Math.cos(angulo);
  yf = ycentro + radio * Math.sin(angulo);
  dibujarLinea(color, xi, yi, xf, yf);
  xi = xf;
  yi = yf;
  console.log("linea " + l)
  }

  var xcentro = x2;
  var ycentro = y5;
  var color = color4;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

    var xcentro = x2;
    var ycentro = y9;
    var color = color4;
    var radio = radio1;

    var xxx = parseInt(texto.value);
    var divisiones = xxx;
    var l = 0;
    var angulo = 0;
    var xi = 0;
    var yi = 0;
    var xi = xcentro + radio * Math.cos(angulo);
    var yi = ycentro + radio * Math.sin(angulo);
    var yf, xf;

    for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x4;
  var ycentro = y3;
  var color = color4;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x4;
  var ycentro = y11;
  var color = color4;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x6;
  var ycentro = y5;
  var color = color4;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x6;
  var ycentro = y9;
  var color = color4;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x1;
  var ycentro = y6;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x1;
  var ycentro = y8;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x2;
  var ycentro = y3;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

    for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x2;
  var ycentro = y11;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x3;
  var ycentro = y2;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x3;
  var ycentro = y12;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x5;
  var ycentro = y2;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
      }

  var xcentro = x5;
  var ycentro = y12;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
      {
      var angulo = 2 * Math.PI * l / divisiones;
      xf = xcentro + radio * Math.cos(angulo);
      yf = ycentro + radio * Math.sin(angulo);
      dibujarLinea(color, xi, yi, xf, yf);
      xi = xf;
      yi = yf;
      console.log("linea " + l)
    }

  var xcentro = x6;
  var ycentro = y3;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x6;
  var ycentro = y11;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x7;
  var ycentro = y6;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x7;
  var ycentro = y8;
  var color = color5;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x1;
  var ycentro = y4;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x1;
  var ycentro = y10;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x4;
  var ycentro = y1;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x4;
  var ycentro = y13;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x7;
  var ycentro = y4;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x7;
  var ycentro = y10;
  var color = color6;
  var radio = radio1;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

  var xcentro = x4;
  var ycentro = y7;
  var color = color7;
  var radio = radio2;

  var xxx = parseInt(texto.value);
  var divisiones = xxx;
  var l = 0;
  var angulo = 0;
  var xi = 0;
  var yi = 0;
  var xi = xcentro + radio * Math.cos(angulo);
  var yi = ycentro + radio * Math.sin(angulo);
  var yf, xf;

  for(l = 0; l <= divisiones; l++)
    {
    var angulo = 2 * Math.PI * l / divisiones;
    xf = xcentro + radio * Math.cos(angulo);
    yf = ycentro + radio * Math.sin(angulo);
    dibujarLinea(color, xi, yi, xf, yf);
    xi = xf;
    yi = yf;
    console.log("linea " + l)
    }

}

tube que ver 2 veces el curso desde el inicio para lograr hacer este proyecto. les recomiendo solo copiar y pegar deje los comentarios para que vean las claves que encontre para hacer el dibujo en el canvas con el mouse.

var dibujoM = document.getElementById(鈥渄ibujo鈥);
var papel = dibujoM.getContext(鈥2d鈥);
var cnv = dibujoM.getBoundingClientRect(); // nos va devolder el left y top del canvas
x = 0, y = 0, dibujando = false, colorcito = 鈥渂lack鈥;

// funcion (e) es una funcion anonima y solo la usamos para crear el 鈥渆鈥;
dibujoM.addEventListener (鈥渕ousedown鈥, function (e)
{
x = e.clientX - cnv.left;// clientX nos da el dato de la posicion en X del document - la posicion en X del canvas;
y = e.clientY - cnv.top;
dibujando = true;
});// con dibujoM.addEventListener vamos a ser capaces de ver solo las coordenas de mouse sobre el canvas;
dibujoM.addEventListener (鈥渕ousemove鈥, function (e)
{
if (dibujando === true)
{
dibujarLinea(colorcito, x, y, e.clientX - cnv.left, e.clientY - cnv.top);
x = e.clientX - cnv.left;
y = e.clientY - cnv.top;
}
});
dibujoM.addEventListener (鈥渕ouseup鈥, function (e)
{
if (dibujando === true)
{
dibujarLinea(colorcito ,x, y, e.clientX - cnv.left, e.clientY - cnv.top);
x = 0;
y = 0;
dibujando = false;
}
});
function dibujarLinea(color, xInicial, yInicial, xFinal, YFinal) // dentro de los parentesis de las funciones van los parametros lo que en este caso tambien puden ser las variables de la funcion;
{
papel.beginPath();
papel.strokeStyle = color;// stroke Style no es una funcion es un atributo es una varible es una propiedad de lienzo;
papel.lineWidth = 3;
papel.moveTo( xInicial, yInicial); // moveTo es un metodo o funcion del Canvas para ubicar el 鈥渓apiz鈥;
papel.lineTo( xFinal, YFinal); // lineTo es la funcion para trazar la linea en el canvas;
papel.stroke();
papel.closePath();
}

al fin!

Despu茅s de mil a帽os y muchos dolores de cabeza. Por fin.

document.addEventListener("mousemove", dibujar);
document.addEventListener("mousedown", empezarTrazo);
document.addEventListener("mouseup", empezarTrazo);
var retazo = document.getElementById("area_de_trazo");
var pintura = retazo.getContext("2d");
var contorno = "black";
var x, y, trazar;

dibujarLinea(contorno, 1, 1, 1, 299, pintura);
dibujarLinea(contorno, 1, 299, 299, 299, pintura);
dibujarLinea(contorno, 1, 1, 299, 1, pintura);
dibujarLinea(contorno, 299, 1, 299, 299, pintura);

function empezarTrazo(clic) {
  if(clic.buttons == 1) {
    x = clic.layerX;
    y = clic.layerY;
    trazar = true;
  }
  else {
    trazar = false;
  }
}
function dibujar(clicMouse) {
  var trazo = "blue";
  var movimiento = 1;
  if(trazar == true) {
    dibujarLinea(trazo, x, y, clicMouse.layerX, clicMouse.layerY, pintura);
    x = clicMouse.layerX;
    y = clicMouse.layerY;
  }
}

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(x_inicial,y_inicial);
  lienzo.lineTo(x_final,y_final);
  lienzo.stroke();
  lienzo.closePath();
}

Gracias a los dem谩s descubr铆 la existencia de mousemove para desarrollar el reto, tambi茅n puse botones para cambiar el color utilizando conocimientos del curso, de compa帽eros y un detalle m谩s para ordenarlos como quer铆a

aqu铆 el codigo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con el mouse</title>
    <style type="text/css">
    body
    {
      font-family: Comic Sans MS;
    }
    h1
    {
      color: red;
    }
    </style>
  </head>
  <body>
    <h1 align = "center">Dibujar con el mouse</h1>
    <left>
      <p align = "center">
        Elige un color<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Rojo" id="boton_rojo"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Azul" id="boton_azul"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Verde" id="boton_verde"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Morado" id="boton_morado"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Rosado" id="boton_rosado"/>
        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="Negro" id="boton_negro"/>
      </p>
    </left>
    <center>
      <canvas height="500" width="500" id="reto">
    </center>
    <script src="salsa.js"></script>
  </body>
</html>

var marco = document.getElementById("reto");
var lienzo = marco.getContext("2d");
var dibujando = false;
var x, y = 0;
var br = document.getElementById("boton_rojo");
var ba = document.getElementById("boton_azul");
var bv = document.getElementById("boton_verde");
var bm = document.getElementById("boton_morado");
var brs = document.getElementById("boton_rosado");
var bn = document.getElementById("boton_negro");
var picked_color;

document.addEventListener("mousedown", drawStart);
document.addEventListener("mouseup", drawEnd);
document.addEventListener("mousemove", draw);
br.addEventListener("click", pickColor);
ba.addEventListener("click", pickColor);
bv.addEventListener("click", pickColor);
bm.addEventListener("click", pickColor);
brs.addEventListener("click", pickColor);
bn.addEventListener("click", pickColor);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function drawStart(evento)
{
  x = evento.layerX;
  y = evento.layerY;
  dibujando = true;
}

function draw(evento)
{
  if(dibujando == true)
  {
    dibujarLinea(picked_color, x, y, evento.layerX, evento.layerY);
    x = evento.layerX;
    y = evento.layerY;
  }
}

function drawEnd(evento)
{
  dibujando = false;
}

function pickColor(evento)
{
  console.log(evento);
  switch(evento.srcElement)
  {
    case boton_rojo:
      picked_color = "red"
    break;
    case boton_azul:
      picked_color = "blue"
    break;
    case boton_verde:
      picked_color = "green"
    break;
    case boton_morado:
      picked_color = "violet"
    break;
    case boton_rosado:
      picked_color = "pink"
    break;
    case boton_negro:
      picked_color = "black"
    break;
    default:
      picked_color = "black"
    break;
  }
}

dibujarLinea("black", 1, 1, 499, 1);
dibujarLinea("black", 499, 1, 499, 499);
dibujarLinea("black", 499, 499, 1, 499);
dibujarLinea("black", 1, 499, 1, 1);

si alguien se da cuenta formas de hacerlo m谩s corto y efectivo por favor que no dude en coment谩rmelas 馃槂
tambi茅n si sabe como solucionar esto

esas lineas diagonales se forman involuntariamente cuando el mouse supera el limite de la izquierda o de arriba del canvas, no pasa con los otros limites, haciendo un console.log me doy cuenta que layerX y layerY cambian a otro n煤mero cuando los sobrepaso (supongo que ser谩 porque ser铆an negativos) quisera evitarlo pero lo que intent茅 no funcion贸 馃槮

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con el mouse</title>
    <style>
     body
     {
       background-color:grey;
       color:white;
       font-family: Helvetica;
     }
     </style>
    <H1>. . . . . . . . . . . . . . . .DIBUJA LO QUE IMAGINAS. . . . . . . . . . . </H1>
  </head>
  <body>
      <P>
        Para dibujar, haz lo siguiente:
        1. Escribe o selecciona el n煤mero que corresponda al color que deseas.
        2. Escribe o selecciona el n煤mero que corresponda al grosor del lapiz que quieres utilizar.
        3. Mueve el mouse para dibujar, manteniendo oprimido el click.
        3. Repite el proceso cuantas veces quieras, jugando con los colores y el grosor del lapiz.
        5. El boton "Borrar todo", dejara tu hoja totalmente limpia.<br> <br>
      <script>
           document.write("______1. amarillo___2. azul___3. rojo___4. verde___5. aguamarina___6. violeta___7. naranja___8. fucsia___9. cafe___10. negro ");
      </script>
      . . . . . . . . . Elige el color: <input type="number" id ="todos_colores"/> <br><br>
      ______1. es 2___2. es 4___3. es 6___4. es 8___5. es 10. . . . . . .  . .Elige el grosor del lapiz: <input type="number" id ="grosor_linea"/>
     . . . . . . . . . . . . . . <input type="button" value ="Borrar todo" id ="boton_borrar" /> <br>
    <canvas width="1300" height="650" id= "area_de_dibujo"></canvas>
    <script src="dibujo_mousepara.js"></script>
  </body>
</html>
var area = document.getElementById("area_de_dibujo");
var hoja = area.getContext("2d");
var ancho= area.width;
var alto = area.height;

var color1= document.getElementById("todos_colores");
var grosor= document.getElementById("grosor_linea");
var borrartodo= document.getElementById("boton_borrar");

area.addEventListener("mousedown", dibujarMouse);
area.addEventListener("mousemove", dibujarMouse);
borrartodo.addEventListener("click", borrarPorClick);

function dibujarLinea(color, grosor_linea, xinicial, yinicial, xfinal, yfinal, hoja)
{
  hoja.beginPath();
  hoja.strokeStyle = color;
  hoja.lineWidth = grosor_linea;
  hoja.moveTo(xinicial, yinicial);
  hoja.lineTo(xfinal, yfinal);
  hoja.stroke();
  hoja.closePath();
}

function borrarPorClick()
{
hoja.clearRect(0,0,ancho,alto);
}

function grosorLinea()
{
  if (grosor.value == 1)
  {
    grosor_linea="2";
  }
  else if (grosor.value == 2)
  {
    grosor_linea="4";
  }
  else if (grosor.value == 3)
  {
    grosor_linea="6";
  }
  else if (grosor.value == 4)
  {
    grosor_linea="8";
  }
  else if (grosor.value == 5)
  {
    grosor_linea="10";
  }
  else
    {
      grosor_linea="2";
    }
}

function colores()
{
  if (color1.value == 1)
  {
    color="yellow";
  }
  else if (color1.value == 2)
  {
    color="blue";
  }
  else if (color1.value == 3)
  {
    color="red";
  }
  else if (color1.value == 4)
  {
    color="green";
  }
  else if (color1.value == 5)
  {
    color="aquamarine";
  }
  else if (color1.value == 6)
  {
    color="violet";
  }
  else if (color1.value == 7)
  {
    color="orange";
  }
  else if (color1.value == 8)
  {
    color="fuchsia";
  }
  else if (color1.value == 9)
  {
    color="brown";
  }
  else
    {
      color="black";
    }
}

function dibujarMouse(mouse)
{
 colores(color1);
 grosorLinea(grosor);
  var colorcito = color;
  var grosorli= grosor_linea;
  if (mouse.which==1)
  {
    var xi = mouse.layerX;
    var yi = mouse.layerY;
    var xf, yf
    var movimientox = mouse.movementX;
    var movimientoy = mouse.movementY;

    xf = xi - movimientox;
    yf = yi - movimientoy;
    dibujarLinea(colorcito, grosorli, xi, yi, xf, yf, hoja);
  console.log(mouse);
  }
}

Me gustar铆a, al terminar el curso de programaci贸n, hacer una interfaz lo mas completa que pueda, para dibujo y posteriormente hacer un tutorial de ello
Alguien ya lo ha hecho?

Yo pego solo el c贸digo 鈥渘uevo鈥.

//Cuando el mouse se mueva por el canvas llame a dibujarMouse
cuadrito.addEventListener("mousemove",dibujarMouse);

//Esta variable fuera de la funci贸n se cambia en la funci贸n y dependiendo de su estado (false, true) es la que determina si se dibuja o no.
var mouseActivado = false;

function dibujarMouse(){
	// se agregan 2 "eventListener" que cuando se "disparan" llama a esta misma funci贸n. Esto hace que cambie el estado de "mouseActivado"
	cuadrito.addEventListener("mouseup",dibujarMouse);
	cuadrito.addEventListener("mousedown",dibujarMouse);
	console.log(event.layerX);
	if (event.type == "mousedown"){
		mouseActivado = true;
	}
	if (event.type == "mouseup"){
		mouseActivado = false;
	}
	// no utilice else o un switch , debido a que el "event.type" pueden ser 3 opciones y con un switch es mucho c贸digo. Vi mas facil colocar un if "sencillito".

	if (mouseActivado){
		if se cambia incluso cuando se hace click la priemra vez, en ese caso, tomo la referencia de donde esta el cursot en X y Y y se lo env铆o a que dibuje el "punto" que hace al inicializar o cuando se mueve con las teclas
		var evtX = event.layerX;
		var evtY = event.layerY;
		dibujarLinea("blue",evtX-1,evtY-1,evtX+1,evtY+1,papel);
	}

}

![](

alert ("Hola amigo, nuestro programa esta dise帽ado para dibujar presionando la tecla CTRL, gracias.")

var textoColor = document.getElementById("textColor");
var cuadrito = document.getElementById("plano");
var papel = cuadrito.getContext("2d");
var borrador = document.getElementById("borrar");
var barra = document.getElementById("rango");


console.log(barra);

function dibujarLinea(color, anchura, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = anchura;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}


papel.beginPath();
papel.rect(0, 0, 300, 300);
papel.fillStyle = "white";
papel.fill();



document.addEventListener("mousedown", lineaRaton);
document.addEventListener("mouseup", lineaRaton);
document.addEventListener("keydown", lineaRaton);
document.addEventListener("mousemove",lineaRaton)



function lineaRaton(e) {
      if(e.ctrlKey == true){
        console.log(e);
          dibujarLinea(textoColor.value, barra.value, e.offsetX-1, e.offsetY-1, e.offsetX+1, e.offsetY+1, papel);
        }
    }

borrador.addEventListener("click", borrando)
function borrando() {
    papel.clearRect(0, 0, cuadrito.width, cuadrito.height);
    papel.beginPath();
    papel.rect(0, 0, 300, 300);
    papel.fillStyle = "white";
    papel.fill();
}```

Al final no pude hacerlo funcionar sin pistas, dejo el link de la pagina que mas me ayudo

var ctx = document.getElementById("myCanvas");
var papel = ctx.getContext("2d");
ctx.addEventListener("mousedown", startDrawing);
ctx.addEventListener("mousemove", drawing);
ctx.addEventListener("mouseup", endDrawing);
var colorcito = "red";
var draw = false;
var x = 0;
var y = 0;

function startDrawing(evento)
{
  x = evento.layerX;
  y = evento.layerY;
  draw = true;
}
function drawing(evento)
{
  if(draw == true)
  {
    dibujarLinea(5,colorcito,x,y,evento.layerX,evento.layerY,papel);
    x = evento.layerX;
    y = evento.layerY;
  }
}
function endDrawing(evento)
{
  dibujarLinea(5,colorcito,x,y,evento.layerX,evento.layerY,papel);
  x = 0;
  y = 0;
  draw = false;
}

I did it 馃槃
html:

js:

Asi me quedo:

Despu茅s de ya bastante tiempo鈥 AL FIN.


no avanzar茅 a la otra clase hasta completar el reto del mouse :3

Me cost贸 horrores, una semana estuve.
No quiero hacerme la genia y subir el c贸digo y ya.
Quiero que todos los que est谩n desanimados como lo estuve yo hasta hoy desde que termin茅 esta clase sepan:
SE PUEDE. CUESTA, PERO SE PUEDE.
Practiqu茅, prob茅, y prob茅, y le err茅, y mir茅 otros c贸digos, los mir茅 y lo que pon铆an no me serv铆a en mi caso tampoco, le faltaba algo a todos. Busqu茅 en internet, en ingl茅s, en alem谩n, en castellano. No le encontraba la vuelta.

Result贸 ser que no pintaba el mouse porque faltaba el 鈥+ 1鈥 en layer X e Y para marcar movimiento. Me da bronca a煤n no entender por qu茅 funcion贸 as铆, porqu茅 necesit茅 meterle la palabra EVENTO en todos lados, si no es una palabra de algo guardado en memoria js. Muchos se contentan con que les funcione, yo NECESITO entenderlo. Poder explicarle a otro y poder volverlo a hacer sabiendo las bases.

Espero mi comentario anime a los que no les sale. UNA SEMANA ESTUVE!!! Nunca me sent铆 tan frustrada. Hoy llor茅 cuando vi que se mov铆a el mouse y pintaba!
Les la p谩gina, y el c贸digo js por si sirve a alguien.

document.getElementById("area_de_dibujo");
var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
document.getElementById("rainbow");
document.getElementById("botoncito");
botoncito.addEventListener("click", aviso);
var colorin = document.getElementById("rainbow");
var x = 0;
var y = 0;
estado = 0;

function aviso()
{     alert("Color " + colorin.value + " seleccionado.");  }   

area_de_dibujo.addEventListener("mousedown", pressMouse);
area_de_dibujo.addEventListener("mousemove", moveMouse);
area_de_dibujo.addEventListener("mouseup", leaveMouse);

function pressMouse(evento)
{
estado = 1;
var x = evento.layerX;
var y = evento.layerY;
}
function moveMouse (evento)
{ if (estado == 1) {
dibujarLinea(colorin.value, x, y, evento.layerX, evento.layerY, papel);
x = evento.layerX + 0,5;
y = evento.layerY + 0,5;
}
else { 
  x = evento.layerX;
  y = evento.layerY;
}
}

function leaveMouse(evento)
 {
    estado = 0;
 }
 
function dibujarLinea(color,xinicial,yinicial, xfinal, yfinal, papel)
{
    var color = colorin.value;
    var cuadrito = document.getElementById("area_de_dibujo");
    var papel = cuadrito.getContext("2d");
    papel.beginPath();
    papel.strokeStyle = color;
    papel.lineWidth = 2;
    papel.moveTo(xinicial, yinicial);
    papel.lineTo(xfinal, yfinal);
    papel.stroke();
    papel.closePath;
    }

Ac谩 dejo la p谩gina de c贸mo qued贸
https://helenadestroy.github.io/mousedrawing/

<document.addEventListener("mousedown",iniciarDibujo);
document.addEventListener("mousemove",dibujando);
document.addEventListener("mouseup",parar);

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var limites = cuadrito.width;
var dibujo = false;
var xi,yi,xf,yf;

contorno();

function iniciarDibujo(evento){
  dibujo = true;
}

function parar(evento){
  dibujo = false;
}

function dibujando(evento){
  xf = evento.offsetX;
  yf = evento.offsetY;
  colorcito = "Blue"

  if (dibujo == true) {
    dibujarLinea(colorcito ,xi ,yi , xf, yf , papel);
  }

  xi = xf;
  yi = yf;

}

function contorno() {
  dibujarLinea("black",1 , 1, 1, limites - 1, papel);
  dibujarLinea("black",1 , limites - 1, limites - 1, limites - 1, papel);
  dibujarLinea("black",limites - 1 , 1, limites - 1, limites - 1, papel);
  dibujarLinea("black",limites - 1 , 1, 1, 1, papel);
}

function dibujarLinea(color, xin, yin, xfi, yfi, lienzo) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xin, yin);
  lienzo.lineTo(xfi, yfi);
  lienzo.stroke();
  lienzo.closePath();
}>
area.addEventListener("mousedown", clickOn);
area.addEventListener("mouseup", clickOff);
area.addEventListener("mousemove", dibujarMouse);

var click = false;

function clickOn(evento) {
    click = true;
    x = evento.layerX;
    y = evento.layerY;
}
function clickOff() {
    click = false;
}
function dibujarMouse(evento) {
    if (click) {
        dibujar(color,x,y,evento.layerX,evento.layerY);
        x = evento.layerX;
        y = evento.layerY;
    }
}

Amogus

dun, dun, dun, dun; dun, dun, dun. dundundun. PAM PAM

Termine mi desafi贸, eso di me tomo un d铆a entero, y tuve que ver c贸digo de otros estudiantes.

Ejercicio resuelto n.n

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujar con el mouse</title>
  </head>
  <body>
    <h1>Dibujo con el mouse</h1>
    <canvas id="dibujito_mouse" width="300" height="300"></canvas>
    <p>Haz clic con el mause para dibujar.</p>
    <script type="text/javascript" src="dibujarConMause.js"></script>
  </body>
</html>
var dibujo = document.getElementById('dibujito_mouse');
dibujo.addEventListener('mousedown',clicMouse);
dibujo.addEventListener('mouseup',sueltaMouse);
dibujo.addEventListener('mousemove',dibujar);
var papel = dibujo.getContext('2d');
var xini,yini,xend,yend;
var dibujar = false;

function clicMouse(evento)
{
  xini = evento.layerX;
  yini = evento.layerY;
  dibujar = true;
}

function sueltaMouse(evento)
{
  dibujar = false
}

function dibujar (evento)
{
  if (dibujar) {
    xend = evento.layerX;
    yend = evento.layerY;
    dibujarLinea("blue",xini,yini,xend,yend,papel);
    xini = xend;
    yini = yend;
  }
}

function dibujarLinea (color,xinicial,yinicial,xfinal,yfinal,lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

DESAF脥O
Hice un h铆brido entre el dibujo de las l铆neas y el dibujo de trazo libre con el mouse
Pueden probarlo aqu铆

Los archivos de texto:
C贸digo html
C贸digo javascript

Luego de varios d铆as de frustraci贸n , aqu铆 esta el resultado.

var cuadro = document.getElementById("area")
var hoja = cuadro.getContext("2d");
var xi, yi, xf, yf, click;
var color = "blue"

cuadro.addEventListener("mousedown", clickD);
cuadro.addEventListener("mouseup", clickU);
cuadro.addEventListener("mousemove", clickM);

function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function clickD(evento1)
{
  click=true;
  xi = evento1.layerX;
  yi = evento1.layerY
}

function clickM(evento2)
{
  if(click)
  {
    xf = evento2.layerX;
    yf = evento2.layerY
    dibujarlinea(color, xi, yi, xf, yf, hoja)
    xi = xf;
    yi = yf;
  }
}

function clickU(evento3)
{
  click = false;
}

Por fin! Se me cerro la mente cuando escuche el reto pero hasta que escribir la idea en una libreta, me gui茅 de los ejemplos de los compa帽eros y despeje mi duda principal de como obtener las coordenadas del mouse fue que pude avanzar.

document.addEventListener("mousedown", mousePresiona);
document.addEventListener("mousemove", mouseMueve);
document.addEventListener("mouseup", mouseSuelta);


var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var x= 150; //Donde arranca la linea
var y = 150;
var presionado = false;

//dibujarLinea("red",149,149,151,151, papel);//Se dibuja el primer punto

function dibujarLinea( color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
  lienzo.beginPath();//Arrancar el paso
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xinicial, yinicial);//mover el lapiz donde arranca la linea
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();//Cerrar linea
  lienzo.closePath();//Quitar el lapiz
}

function mousePresiona(evento)
{
  presionado = true;
}

function mouseMueve(evento)
{
  var colorcito = "blue";
  var xMueve= evento.clientX;//Toma la coordenada del mouse X
  var yMueve = evento.clientY;// Toma la coordenada del mouse Y
  console.log(xMueve, yMueve);//Prueba para imprimir en la consola las coordenadas
  if (presionado == true)//Solo si esta presionado el Click se va a dibujar
  {
    dibujarLinea(colorcito, xi, yi, xMueve, yMueve, papel);
  }
  xi = xMueve;// Pasar valor actual de x a xinicial para tener continuidad
  yi = yMueve;// Pasar valor actual de y a y inicial para tener continuidad

}

function mouseSuelta(evento)
{
  presionado = false;
}

Le agregu茅 la opci贸n de seleccionar el color de la linea


var cuadrito = document.getElementById("area_de_dibujo");
const papel = cuadrito.getContext("2d");
//getBoundingClientRect te da la posici贸n del elemento
// en relaci贸n con la ventana
const rect = cuadrito.getBoundingClientRect();
//aqu铆 recibes los parametros del input mycolor
var croma = document.getElementById("myColor");
var colorcito = croma.value;
//茅ste evento es para que asigne el nuevo valor
//al escoger un color nuevo
croma.addEventListener("input",  function(){
  colorcito = croma.value;
});
//creamos una variable que nos va a ayudar a
//verificar si estamos dibujando o si s贸lo se
//est谩 moviendo el mouse sobre el canvas
var trazando=false;
var x0=0;
var y0=0;
var xf=0;
var yf=0;
//evento para detectar el click
cuadrito.addEventListener("mousedown",obtCoordsD);
//evento para detectar el movimiento del puntero
cuadrito.addEventListener("mousemove",obtCoordsM);
//evento para detectar la acci贸n de dejar de presionar
cuadrito.addEventListener("mouseup",obtCoordsU);

//funci贸n que dibuja la linea
function dibujarMouse(color,x,y,xg,yg,lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 4;
  lienzo.moveTo(x,y);
  lienzo.lineTo(xg, yg);
  lienzo.stroke();
  lienzo.closePath();
}
//obtCoordsD nos sirve para guardar los valores
//iniciales , el punto en donde damos click!
function obtCoordsD(paper)
{
  //rect.left y rect.top son los valores del desfase
  //del canvas con respecto la esquina superior izquierda
  x0=paper.clientX-rect.left;
  y0=paper.clientY-rect.top;
  //trazando se vuelve verdadero debido
  //a que al dar click iniciamos el dibujo
  trazando=true;
}
//obtCoordsM de inicio revisa si estamos dibujando
//obtiene el segundo punto despu茅s de dar click con el mouse
//despu茅s llama la funci贸n que dibuja y traza la linea
//desde el punto inicial al punto actual
//al final recorre las coordenadas actuales a las variables iniciales

function obtCoordsM(paper)
{
  if (trazando==true)
  {
  xf=paper.clientX-rect.left;
  yf=paper.clientY-rect.top;
  dibujarMouse(colorcito,x0,y0,xf,yf,papel);
  x0=xf;
  y0=yf;
  }
}
//obtCoordsU se ejecuta cuando dejamos de presionar
//automaticamente modifica Trazando a falso y evitar que
// obtCoordsM siga dibujando
function obtCoordsU(paper)
{
  trazando = false;

}
var click = {
  MOUSEDOWN: 1,
  MOUSEUP: 0
};

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var colores = document.getElementById("caja_color");
var x = cuadrito.clientX;
var y = cuadrito.clientY;
cuadrito.addEventListener("mousemove", hacerDibujo);

function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal,lienzo)
{
  lienzo.beginPath();
  lienzo.lineWidth = 3;
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

  function hacerDibujo(evento1)
  {
    if(evento1.buttons == click.MOUSEDOWN)
    {
      var movx = evento1.offsetX;
      var movy = evento1.offsetY;
      var ecolor = colores.value;

      dibujarLinea(ecolor,x,y,movx,movy,papel);
      x = evento1.layerX;
      y = evento1.layerY;
    }
    else if (evento1.button == click.MOUSEUP)
    {
      x = evento1.layerX;
      y = evento1.layerY;
    }
  }```

Conserve las funciones de dibujar teclas por defecto 馃槈

<code>
function dibujarTeclado(evento){
var colorcito="brown", movimiento=5;
  switch (evento.keyCode){
    case teclas.DOWN:
    dibujarLinea(colorcito, x, y, x, y+movimiento, papel)
    y=y+movimiento;
    break;
    case teclas.UP:
    dibujarLinea(colorcito, x, y, x, y-movimiento, papel)
    y=y-movimiento;
    break;
    case teclas.LEFT:
    dibujarLinea(colorcito, x, y, x-movimiento, y, papel)
    x=x-movimiento;
    break;
    case teclas.RIGHT:
    dibujarLinea(colorcito, x, y, x+movimiento, y, papel)
    x=x+movimiento;
    break;
    default:
    console.log("otra tecla");
    break;
  }
}
function dibujarLinea(color, xi, yi, xf, yf, trazo){
  trazo.beginPath();  //Bajar el lapiz
  trazo.strokeStyle=color; //Seleccionar color, es un atributo del objeto lienzo
  trazo.lineWidth=3; // Grosor de la linea
  trazo.moveTo(xi, yi);  //Inicio del camino
  trazo.lineTo(xf, yf);   //Final del camino
  trazo.stroke(); //Dibujarla con el estilo y color definido
  trazo.closePath;  //Levantar el lapiz
}
//------------------DUBUJO CON MOUSE-------------------
var draw=false, colorcito="blue";

cuadrito.addEventListener("mousedown", clickEvent1);
function clickEvent1(detail){
  draw=true;
}
cuadrito.addEventListener("mouseup", clickEvent2);
function clickEvent2(detail){
  draw=false;
}
cuadrito.addEventListener("mousemove", mouseDraw);
function mouseDraw(detail){
  if(draw==true){
    dibujarLinea(colorcito, detail.x, detail.y, detail.x+1, detail.y+1, papel);
  }
}

</ code>

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");

var azulete = document.getElementById("azul");
azulete.addEventListener("click", asignaColorAzul);
var rojete = document.getElementById("rojo");
rojete.addEventListener("click", asignaColorRojo);
var verdete = document.getElementById("verde");
verdete.addEventListener("click", asignaColorVerde);
var negrete = document.getElementById("negro");
negrete.addEventListener("click", asignaColorNegro);

cuadrito.addEventListener("mousedown", pinta);
cuadrito.addEventListener("mouseup", noPinta);
cuadrito.addEventListener("mousemove", aPintar);

var esfero = false;
var x, y;
var ancho = 3;
var colorcito = "red";

function asignaColorAzul() {
    colorcito = "blue";
}
function asignaColorRojo() {
    colorcito = "red";
}
function asignaColorVerde() {
    colorcito = "green";
}
function asignaColorNegro() {
    colorcito = "black";
}

function pinta(evento)
{esfero = true;}

function noPinta()
{esfero = false;}

function aPintar(evento)
{  
    //Para ajustar el trazado a la punta visible del mouse
    x = evento.clientX - 9;
    y = evento.clientY - 9;
    //Verifica si el mouse est谩 activo para pintar
    if (esfero == true)
    {
        dibujarLinea(colorcito,x-1,y-1,x+1,y+1,papel);
    }
}

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.lineWidth = ancho;
    lienzo.moveTo(xinicial,yinicial);
    lienzo.lineTo(xfinal,yfinal);
    lienzo.stroke();
    lienzo.closePath();
}```

me costo demasiado 2 dias de neuronas,

Les presento mi obra, yo la llamo

GRAMA PROHIBIDA 馃槂

Si juegan con el ancho de la linea, pueden obtener distintos efectos de pincel.

Aqui mi resultado del reto, y pensar que solo es el inicio XD

Muy interesante. Mis felicitaciones.

Si no hubiese sido por varios de los aportes que est谩n m谩s abajo, no lo hubiese hecho, pero aqu铆 est谩: todo un reto, 2 horas y media en mi laptop para al fin entender el c贸digo y hacerlo correr:

//mouseenter, mouseleave; mouseover, mouseout; mousedown, mouseup; mousemove,
//click, auxclick, dblclick, contextmenu, wheel.
document.addEventListener("mousemove", dibujarMouse);
document.addEventListener("mousedown", linea);
document.addEventListener("mouseup", linea);

var clean = document.getElementById("borrar");
var d = document.getElementById("area_de_dibujo");
var p = d.getContext("2d");
var colorx = "pink";
var dibujar = false;

clean.addEventListener("click", borrarDibujo);

function dibujarLinea(color, x0, y0, x1, y1, lienzo){
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 2;
  lienzo.moveTo(x0,y0);
  lienzo.lineTo(x1,y1);
  lienzo.stroke();
  lienzo.closePath();
}

function linea(evento){

  if(evento.type == "mousedown"){
      dibujar = true;
      }
  if(evento.type == "mouseup"){
        dibujar = false;
      }
  }

function dibujarMouse(evento){

  if (dibujar == true){

    var x0 = evento.layerX;
    var y0 = evento.layerY;
    dibujarLinea(colorx, x0, y0, x0+2, y0+2, p);
    console.log(evento);
    }
  }

dibujarLinea(colorx,1,1,1,299,p);
dibujarLinea(colorx,1,299,299,299,p);
dibujarLinea(colorx,299,299,299,1,p);
dibujarLinea(colorx,299,1,1,1,p);

function borrarDibujo(){
  p.clearRect(0, 0, d.width, d.height);
  dibujarLinea(colorx,1,1,299,1,p);
  dibujarLinea(colorx,1,299,299,299,p);
  dibujarLinea(colorx,299,299,299,1,p);
  dibujarLinea(colorx,299,1,1,1,p);
}

cumpliendo con el reto de Freddy.

//object


document.addEventListener("mousedown", mouseClick);
document.addEventListener("mouseup", mouseNoClick);
document.addEventListener("mousemove", dibujarMouse);
var d = document.getElementById("area_de_dibujo");
var papel = d.getContext("2d");
var control = false;
console.log(d);

//para calcular bien las coordenadas
dibujarLinea("blue",0,0,300,0,papel);
dibujarLinea("blue",0,0,0,300,papel);
dibujarLinea("blue",300,0,300,300,papel);
dibujarLinea("blue",300,300,0,300,papel);

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final, lienzo){
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.lineWidth = 3;
    lienzo.moveTo(x_inicial, y_inicial);
    lienzo.lineTo(x_final,y_final);
    lienzo.stroke();
    lienzo.closePath();
}
 function dibujarMouse(evento_dib){

     if(evento_dib.isTrusted && control == true){
         var x = evento_dib.offsetX;
         var y = evento_dib.offsetY;
         //console.log("x: " + x + " y: " + y);
         //console.log(x);
         dibujarLinea("red",x,y,x+4,y+4,papel);
     }

     //console.log(evento_dib);
     //console.log(evento_dib.offsetX);

 }

 function mouseClick(evento_click){
    control = true;
    var x = evento_click.offsetX;
    var y = evento_click.offsetY;
         
    dibujarLinea("red",x,y,x+2,y+2,papel);
    
 }

 function mouseNoClick(){
    control = false;

 }

me llevo lo mio pero aqu铆 esta y un v铆deo que le ara la vida mas hermosa con atom.

//Pocici贸n por default
var y = 150;
var x = 150;

//Eventos
document.addEventListener("mousedown", dibujarMouse);
document.addEventListener("mouseup", dibujarMouse);

//Canvas context
var doc = document.getElementById("Papel");
var papel = doc.getContext("2d");

//Puto sentral
dibujarLinea("#fffafa", 149, 149, 151, 151, papel);

//Para dibujar
function dibujarLinea(color , xInicial , yInicial , xFinal , yFinal, lienzo)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.lineWidth = 3;
  lienzo.moveTo(xInicial , yInicial);
  lienzo.lineTo(xFinal , yFinal);
  lienzo.stroke();
  lienzo.closePath();

}

//Ejecutador de funciones
function dibujarMouse(evento)
{
  var colorsito = "#c5e2e3";
  var x2 = evento.offsetX;
  var y2 = evento.offsetY;

  if (evento.isTrusted == true)
  {
    dibujarLinea(colorsito, x, y, x2, y2, papel);
    x = x2;
    y = y2;
  }
  console.log(evento);
}```

listo tarea completada ;3

var d = document.getElementById(鈥渮ona_de_dibujo鈥);
var papel = d.getContext(鈥2d鈥);
var empezarDibujo = false;
var xInicial, yInicial, xFinal, yFinal;
document.addEventListener(鈥渕ousedown鈥, primerPunto);
document.addEventListener(鈥渕ousemove鈥, movimiento);
document.addEventListener(鈥渕ouseup鈥, terminarDibujo);

function primerPunto(mouseEvent){
xInicial = mouseEvent.layerX;
yInicial = mouseEvent.layerY;
empezarDibujo = true;
console.log(xInicial, yInicial);
}
function movimiento(mouseEvent)
{
if (empezarDibujo == true)
{
xFinal = mouseEvent.layerX;
yFinal = mouseEvent.layerY;
dibujar_linea(鈥渂lack鈥, xInicial, yInicial, xFinal, yFinal, papel);
xInicial = xFinal;
yInicial = yFinal;
console.log(xInicial, yInicial)
}
}
function terminarDibujo()
{
empezarDibujo = false;
}

function dibujar_linea(color, xinicial, yinicial, xfinal, yfinal, lienzo)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth = 5;
lienzo.moveTo(xinicial,yinicial);
lienzo.lineTo(xfinal,yfinal);
lienzo.stroke();
lienzo.closePath();
}
console.log(empezarDibujo)
console.log(movimiento)
console.log(terminarDibujo)

Aca esta el codigo para quien nesicite