No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Dibujar en canvas con las flechas del teclado

17/37
Recursos

Ya conocemos todo lo necesario para poder dibujar usando el teclado, mira cómo escribimos nuestro programa con JavaScript

Aportes 2760

Preguntas 462

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

  Ademas del mouseup y mouse down le agregue mousemove para dibujar moviendo el mouse siempre que el click de muse este presionado..... 

 
var estado = 0;          // estado del click      
var colorLinea = "blue";    // color a la linea

var area = document.getElementById('area_dibujo');
var papel = area.getContext("2d");
var x;                      // guardar coordenada en X
var y;                      // guardar coordenada en Y
document.addEventListener("mousedown",presionarMouse);  //cuando presionas click
document.addEventListener("mouseup",soltarMouse);       //cuando sueltas click
document.addEventListener("mousemove",dibujarMouse);    //cuando mueves el mouse

// dibujo del borde
dibujarLinea("red", 0, 0, 300, 0, papel)
dibujarLinea("red", 300, 0, 300, 300, papel)
dibujarLinea("red", 300, 300, 0, 300, papel)
dibujarLinea("red", 0, 300, 0, 0, papel)

// Funcion para mousemove
function dibujarMouse(evento){
  if (estado == 1) {   // solo se dibujara si esta el click del mouse presionado
    dibujarLinea(colorLinea, x, y, evento.layerX, evento.layerY, papel);
  }
  x = evento.layerX;
  y = evento.layerY;
}

// Funcion para mousedown
function presionarMouse(evento){
  estado = 1;         //click presionado  
  x = evento.layerX;
  y = evento.layerY;
}

// Funcion para mouseup
function soltarMouse(evento){
  estado = 0;         // click suelto
  x = evento.layerX;
  y = evento.layerY;
}
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){
  lienzo.beginPath();                  // Inicia el trazo
  lienzo.strokeStyle = color;          // Estilo de trazo (color)
  lienzo.lineWidth = 2;                // Ancho de la linea
  lienzo.moveTo(xinicial, yinicial);   // Donde comienza la linea
  lienzo.lineTo(xfinal, yfinal);       // Traza la linea (ubica punto final)
  lienzo.stroke();                     // Dibuja con el estio de trazo
  lienzo.closePath();                  // Cierra el dibujo
}

 

ūüźĪ‚ÄćūüíĽ 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;
}

Nuestro profe inmortalizado en canvas

Logr√© hacer una selecci√≥n de color y le agregu√© una goma para que sea m√°s c√≥modo ūüėĄ

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 ‚Äúl√°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 ‚Äúdecente‚Ä̂Ķ No logre que funcione en el m√≥vil me imagino que eso ya es con los eventos touch.

Les comparto mi ejercicio:  https://stipaltamar.github.io/dibujoCanvas/

Busqué simplificar el código, además permite seleccionar el grosor de linea y el color.

Si gustan revisar el c√≥digo esta en mi SSH [email protected]:StipAltamar/dibujoCanvas.gi

Slds,

No me bastó con el codigo, tenía también que probarlo y me quedé pegado XD

![](

Excelente todo, es incre√≠ble todo lo que se aprende estudiando as√≠ y m√°s cuando nos proponemos a hacer mas de lo que nos acaban de ense√Īar.

Esto fue lo que logre después de darle un poco más.

Les comparto!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="estilos.css">
    <title>Dibujando con flechas</title>
  </head>
  <body>
    <h1>¬°DIBUJEMOS!</h1>
    <canvas width="300" height="300" id="area_de_dibujo"></canvas>
    <br>
    <input type="button" class="boton_amarillo" name="amarillo" id="botonAmarillo"/>
    <input type="button" class="boton_naranjado" name="naranjado" id="botonNaranjado"/>
    <input type="button" class="boton_rojo" name="rojo" id="botonRojo"/>
    <input type="button" class="boton_rosado" id="botonRosado"/>
    <input type="button" class="boton_azul" id="botonAzul"/>
    <input type="button" class="boton_azulClaro" id="botonAzulClaro"/>
    <input type="button" class="boton_verde" id="botonVerde"/>
    <input type="button" class="boton_verdeClaro" id="botonVerdeClaro"/>
    <input type="button" class="boton_cafe" id="botonCafe"/>
    <input type="button" class="boton_negro" id="botonNegro"/>
    <input type="button" class="boton_gris" id="botonGris"/>
    <input type="button" class="boton_blanco" id="botonBlanco"/>
    <br>
    <p>Grosor del l√°piz:<br></p>
    Grosor: <input type="text" class="texto_medidas" id="grosorLapiz" />
    <input type="button" class="boton_medidas" value="Cargar" id="botonGrosor" />
    <p>Elige el ancho y el alto de tu hoja de dibujo:<br></p>
    Ancho: <input type="text" class="texto_medidas" id="anchoHoja" />
    Alto: <input type="text" class="texto_medidas" id="altoHoja" />
    <input type="button" class="boton_medidas" value="Cargar" id="botonMedidas" />
    <p>
      Mueve las flechas del teclado para dibujar!<br>
      O usa tu mouse si lo prefieres!
    </p>
    <a href="flechas.html"><input type="button" value="Limpiar" /></a>
    <script src="eventos.js"></script>
  </body>
</html>```





input.boton_amarillo{
background-color: yellow;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_naranjado{
background-color: #ff9244;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_rojo{
background-color: red;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_rosado{
background-color: pink;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_azul{
background-color: blue;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_azulClaro{
background-color: #7ce2ff;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_verde{
background-color: green;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_verdeClaro{
background-color: #7cff7a;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_cafe{
background-color: brown;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_negro{
background-color: black;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_gris{
background-color: grey;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.boton_blanco{
background-color: white;
width: 15px;
height: 15px;
border-style: outset;
border-color: grey;
border-radius: 50%;
}

input.texto_medidas{
width: 50px;
}

input.boton_medidas{
width: 80px;
}```

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

document.addEventListener("keydown", dibujarTeclado);

document.addEventListener("mousedown", presionarMouse);
document.addEventListener("mouseup", soltarMouse);
document.addEventListener("mousemove", movimientoMouse);

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var x = 5;
var y = 5;
var estadoClick; //Guarda el estado del click
var xm, ym; //Guarda las coordenadas en x y en y
var colorcito = "black";
var grosorLapizDibujo = 2;

var botonGrosorLapiz = document.getElementById("botonGrosor");
botonGrosorLapiz.addEventListener("click", grosor_Lapiz);

var botonAnchoAlto = document.getElementById("botonMedidas");
botonAnchoAlto.addEventListener("click", medidasCanvas);

var colorAmarillo = document.getElementById("botonAmarillo");
var colorNaranjado = document.getElementById("botonNaranjado");
var colorRojo = document.getElementById("botonRojo");
var colorRosado = document.getElementById("botonRosado");
var colorAzul = document.getElementById("botonAzul");
var colorAzulClaro = document.getElementById("botonAzulClaro");
var colorVerde= document.getElementById("botonVerde");
var colorVerdeClaro = document.getElementById("botonVerdeClaro");
var colorCafe = document.getElementById("botonCafe");
var colorNegro = document.getElementById("botonNegro");
var colorGris = document.getElementById("botonGris");
var colorBlanco = document.getElementById("botonBlanco");

colorAmarillo.addEventListener("click", color_Amarillo);
colorNaranjado.addEventListener("click", color_Naranjado);
colorRojo.addEventListener("click", color_Rojo);
colorRosado.addEventListener("click", color_Rosado);
colorAzul.addEventListener("click", color_Azul);
colorAzulClaro.addEventListener("click", color_AzulClaro);
colorVerde.addEventListener("click", color_Verde);
colorVerdeClaro.addEventListener("click", color_VerdeClaro);
colorCafe.addEventListener("click", color_Cafe);
colorNegro.addEventListener("click", color_Negro);
colorGris.addEventListener("click", color_Gris);
colorBlanco.addEventListener("click", color_Blanco);

function  grosor_Lapiz(){
  var numeroGrosor = document.getElementById("grosorLapiz");
  grosorLapizDibujo = parseInt(numeroGrosor.value);
}

function color_Amarillo()
{
  colorcito = "yellow";
}

function color_Naranjado()
{
  colorcito = "#FF9244";
}

function color_Rojo()
{
  colorcito = "red";
}

function color_Rosado()
{
  colorcito = "pink";
}

function color_Azul()
{
  colorcito = "blue";
}

function color_AzulClaro()
{
  colorcito = "#7CE2FF";
}

function color_Verde()
{
  colorcito = "green";
}

function color_VerdeClaro()
{
  colorcito = "#7CFF7A";
}

function color_Cafe()
{
  colorcito = "brown";
}

function color_Negro()
{
  colorcito = "black";
}

function color_Gris()
{
  colorcito = "grey";
}

function color_Blanco()
{
  colorcito = "white";
}

function presionarMouse(evento)
{
  estadoClick = 1; //El click presionado
  xm = evento.layerX;
  ym = evento.layerY;
}

function soltarMouse(evento)
{
  estadoClick = 0; //El click suelto
  xm = evento.layerX;
  ym = evento.layerY;
}

function movimientoMouse(evento)
{
  if (estadoClick == 1) //Solo dibuja si el click esta presionado
  {
    dibujarLinea(colorcito, grosorLapizDibujo, xm, ym, evento.layerX, evento.layerY, papel);
  }
}

function medidasCanvas()
{
  var anchoCanvas = document.getElementById("anchoHoja");
  var altoCanvas = document.getElementById("altoHoja");

  cuadrito.width = parseInt(anchoCanvas.value);
  cuadrito.height = parseInt(altoCanvas.value);

  var ancho = cuadrito.width;
  var alto = cuadrito.height;

  dibujarLinea("grey", 0, 1, 1, ancho, 1, papel);
  dibujarLinea("grey", 0, ancho, 1, ancho, alto, papel);
  dibujarLinea("grey", 0, ancho, alto, 1, alto, papel);
  dibujarLinea("grey", 0, 1, alto, 1, 1, papel);

  dibujarLinea("white", 0, ancho - 1, alto - 1, ancho + 1, alto + 1, papel);
}

dibujarLinea("grey", 0, 1, 1, 299, 1, papel);
dibujarLinea("grey", 0, 299, 1, 299, 299, papel);
dibujarLinea("grey", 0, 299, 299, 1, 299, papel);
dibujarLinea("grey", 0, 1, 299, 1, 1, papel);

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

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

function dibujarTeclado(evento)
{
  var movimiento = 2;

  switch (evento.keyCode)
  {
    case teclas.UP:
      dibujarLinea(colorcito, grosorLapizDibujo, x, y, x, y - movimiento, papel);
      y = y - movimiento;
    break;
    case teclas.DOWN:
      dibujarLinea(colorcito, grosorLapizDibujo, x, y, x, y + movimiento, papel);
      y = y + movimiento;
    break;
    case teclas.LEFT:
      dibujarLinea(colorcito, grosorLapizDibujo, x, y, x - movimiento, y, papel);
      x = x - movimiento;
    break;
    case teclas.RIGHT:
      dibujarLinea(colorcito, grosorLapizDibujo, x, y, x + movimiento, y, papel);
      x = x + movimiento;
    break;
    default:
      console.log("Otra tecla");
  }
}```


Disfruto bastante estudiar con ganas y mas algo que me gusta pero nunca hab√≠a disfrutado tanto como lo hago con estos cursos y esa forma que tienen de ense√Īar.

Increible. Gracias.



Como descubrieron que existe un ‚Äúmousemove‚ÄĚ 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?

Yo hice el ejercicio y agregé una función para guardar la imagen que se dibujó en el canvas, les comparto el código:


HTML

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8" />
	<title>Dibujando con teclas</title>
	<style>
	body
	{
		background: black;
	}
	canvas
	{
		background: white;
		cursor: pointer;
	}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<button id="boton">Guardar imagen</button>
	<script src="eventos.js"></script>
</body>
</html>


JS


var canvas = document.getElementById("canvas");
var lienzo = canvas.getContext("2d");
var boton = document.getElementById("boton");

canvas.addEventListener("mousedown", empezarMouse);
canvas.addEventListener("mousemove", dibujarMouse);
canvas.addEventListener("mouseup", terminarMouse);
boton.addEventListener("click", guardarImagen);

var xi, yi, xf, yf;
var mouse_clickeado = false;

function empezarMouse(e)
{
	mouse_clickeado = true;

	xi = e.layerX;
	yi = e.layerY;
}

function dibujarMouse(e)
{
	if(mouse_clickeado)
	{
		xf = e.layerX;
		yf = e.layerY;
		dibujarLinea(xi, yi, xf, yf);
		xi = xf;
		yi = yf;
	}
}

function terminarMouse(e)
{
	mouse_clickeado = false;
}

function guardarImagen()
{
	var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
	window.location.href=image;
}

function dibujarLinea(xi, yi, xf, yf)
{
	lienzo.beginPath();
	lienzo.strokeStyle = "#08C";
	lienzo.lineWidth = 3;
	lienzo.moveTo(xi, yi);
	lienzo.lineTo(xf, yf);
	lienzo.stroke();
	lienzo.closePath();
}

no entiendo como hacer en mouse, se siente feo no saber que hacer la verdad, nose ni si quiera por donde empezar ūüė¶

Este fue mi resultado del Challenge… ¡qué genial, bonito y asombroso!.. es aprender:





Este es mi codigo. El punto inicial se toma al hacer click, el final al soltar el mouse; al hacer dicha acciónse dibuja la línea.


var miCanvas = document.getElementById("dibujo");
var papel = miCanvas.getContext("2d");

miCanvas.addEventListener("mousedown", inicio);
miCanvas.addEventListener("mouseup", fin);
var xi;
var yi;
var xf;
var yf;

function inicio(evento)
{
 xi = evento.offsetX;
yi = evento.offsetY;
}

function fin(evento)
{
xf = evento.offsetX;
yf = evento.offsetY;
dibujarLinea("blue", xi, yi, xf, yf, papel);
}

//Y la función dibujarLinea ya la conocemos.

    


    

    

    

   


Logre hacer mi propio jueguito de culebrita ūüėÉ esta genial, gracias. abajo deje el codigo

Es muy dificil

var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
cuadrito.addEventListener("mousedown",mouse);
var x = 100;
var y = 100;

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

function mouse(click) {
  dibujarLinea("red",x,y,click.clientX,click.clientY,papel);
  x = click.clientX;
  y =  click.clientY;
}

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();
}```

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.

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();
}```

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é:

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

Gracias Platzi y a todos compa√Īeros, confieso que no pude solo, tuve que apoyarme en la comunidad y luego de mucho ensaypo y error, salio! y hasta le he colocado un BORRADOR a mi Pizarra!! Genial!
![](

//layerX, layerY
//buttons = 1 ; buttons = 2

var movimiento = 0;
var cuadrito = document.getElementById("area_de_dibujo");
var papel = cuadrito.getContext("2d");
var x;
var y;

document.addEventListener("mousedown", presionarMouse);
document.addEventListener("mousemove", moverMouse);
document.addEventListener("mouseup", soltarMouse);



function presionarMouse(evento)
{
  movimiento = 1;
  x = evento.layerX;
  y = evento.layerY;
}

function moverMouse(evento)
{
  if (evento.buttons == 1)
  {
    color = "blue";
    pincel = 3;
    }
    else {
      color = "white";
      pincel = 7;
    }
  if (movimiento == 1)
   {
     dibujarLinea(color , pincel, x , y , evento.layerX, evento.layerY, papel);
     x = evento.layerX;
     y = evento.layerY;
  }
}

function soltarMouse(evento)
{
  movimiento = 0;
  x = evento.layerX;
  y = evento.layerY;
}

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

dibujarLinea("gold", 3, 0, 0, 300, 0, papel)
dibujarLinea("gold", 3, 300, 0, 300, 300, papel)
dibujarLinea("gold", 3, 300, 300, 0, 300, papel)
dibujarLinea("gold", 3, 0, 300, 0, 0, papel)


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.

document.addEventListener(‚Äúkeyup‚ÄĚ,dibujarTeclado);
document.addEventListener(‚Äúmousemove‚ÄĚ,dibujaMouse);
document.addEventListener(‚Äúmousedown‚ÄĚ,activaMouse);
document.addEventListener(‚Äúmouseup‚ÄĚ,desactivaMouse);
var cuadrito = document.getElementById(‚Äúarea_de_dibujo‚ÄĚ);
var papel = cuadrito.getContext(‚Äú2d‚ÄĚ);
var paletas = document.getElementById(‚ÄúPaleta‚ÄĚ)
var color = paletas.value;
var x = 150;
var y = 150;
var dif = 0.5;
var Dibujando;
dibujarLinea(‚Äúred‚ÄĚ, 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…

hola atodos aqui esta mi aporte, estupendos Videos ,Gracias


/* Archivo HTML */

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Dibujo Canvas Con el Mouse del Pc</title>
</head>
<body>
      <p id="vistaCoordenadas">o</p>
      <canvas style="border: 1px solid;" width="500" height="500" id="mouseContentCanvas"></canvas>
      <button id="boton_Limpio">Limpiar Lienzo</button>
      <input type="color" name="colorUser" id="idColorUser" />
      <p>Dibujando en canvas con el Mouse</p>
      <script src="dibujoMouse.js"></script>
</body> 
</html>

/* ********************************************************************* */


/* Archivo dibujoMouse.js */

var Boton_LimpiarLienzo = document.getElementById('boton_Limpio');
var ContentDibujo = document.getElementById('mouseContentCanvas');
var LienzoDibujo = ContentDibujo.getContext('2d');
var anchoCanvas = ContentDibujo.width;
var largoCanvas = ContentDibujo.height;
var colorcito = document.getElementById('idColorUser');
var ClickActivo = false;
var color = '#000000';

Boton_LimpiarLienzo.addEventListener('click', dibujo_Limpiar);

ContentDibujo.addEventListener('mousedown', dibujo_SosteniendoClick);

function dibujo_SosteniendoClick(eventoSostenido)
{
   ContentDibujo.addEventListener('mousemove', dibujo_MoviendoClick);
   color = colorcito.value;
   ClickActivo = true;
}

function dibujo_MoviendoClick(eventoMovimiento)
{
   ContentDibujo.addEventListener('mouseup', dibujo_SoltandoClick);

   xinicial = eventoMovimiento.clientX - 7;
   yinicial = eventoMovimiento.clientY - 49;

   xfinal = eventoMovimiento.clientX - 8;
   yfinal = eventoMovimiento.clientY - 50;

   if( ClickActivo == true )
   {
      dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, LienzoDibujo);
   }
	
   var coordenadasLienzo = 'X = ' + xfinal + ' Y = ' + yfinal;
   document.getElementById('vistaCoordenadas').innerHTML = coordenadasLienzo;
}

function dibujo_SoltandoClick(eventoSuelto)
{
   ClickActivo = false;
}

function dibujo_Limpiar()
{
   LienzoDibujo.clearRect(0 , 0, anchoCanvas, largoCanvas);
}

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo) 
{
   lienzo.beginPath();// Iniciar el dibujo
   lienzo.strokeStyle = color;// Indicar color del traso
   lienzo.moveTo(xinicial, yinicial);// Indicar primeras cordenada de la linea
   lienzo.moveTo(xinicial, yinicial);// Indicar primeras cordenada de la linea
   lienzo.lineTo(xfinal, yfinal);// Indicar cordenads finales de la linea
   lienzo.stroke();// Indicar el fin del dibujo de la linea
   lienzo.closePath();// Cierre definitivo del dibujo
}

/* ********************************************************************* */

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

Para teclas y ratón:


var d = document.addEventListener("keydown",dibujarTeclado);
var AreaDeDibujo = document.getElementById("AreaDeDibujo");
var Papel = AreaDeDibujo.getContext("2d");
var m = AreaDeDibujo.addEventListener("mousedown",dibujarMouse);
var Ancho = AreaDeDibujo.width;
var Alto = AreaDeDibujo.height;
var x = Ancho/2;
var y = Alto/2;
var Avance = 1;

//Hago un Marco, para saber dónde es que estoy dibujando
dibujarLinea("black",0,0,Ancho,0,Papel);
dibujarLinea("black",Ancho,0,Ancho,Alto,Papel);
dibujarLinea("black",Ancho,Alto,0,Alto,Papel);
dibujarLinea("black",0,Alto,0,0,Papel);

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

//Funciones para ahorrar trabajo
function dibujarTeclado(evento){
	switch(evento.keyCode){
		case Teclas.UP:
			console.log("Arriba");
			color = "gray";
			dibujarLinea(color,x,y,x,y-Avance,Papel);
			y = y - Avance;
		break;
		case Teclas.DOWN:
			console.log("Abajo");
			color = "yellow";
			dibujarLinea(color,x,y,x,y+Avance,Papel);
			y = y + Avance;
		break;
		case Teclas.LEFT:
			console.log("Izquierda");
			color = "red";
			dibujarLinea(color,x,y,x-Avance,y,Papel);
			x = x - Avance;
		break;
		case Teclas.RIGHT:
			console.log("Derecha");
			color = "blue";
			dibujarLinea(color,x,y,x+Avance,y,Papel);
			x = x + Avance;
		break;
		default:
			console.log("Otra");
		break;
	}
}

function dibujarMouse(evento){
	console.log(evento);
	dibujarLinea("black",x,y,evento.layerX,evento.layerY,Papel);
	x = evento.layerX;
	y = evento.layerY;
	
}

function dibujarLinea(color,xi,yi,xf,yf,lienzo){
	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.lineWidth = 2;
	lienzo.moveTo(xi,yi);
	lienzo.lineTo(xf,yf);
	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();
}

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>

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 ‚Äúmouseover‚ÄĚ en lugar de ‚Äúmousemove‚ÄĚ. -.-

http://javascript.info/tutorial/mouse-events#mouse-event-types


Para los que quieran saber mas sobre los eventos del mouse en JS

¡Me tardé dos semanas pero al fin aquí está!
Me siento feliz y motivada ^^


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(‚Äúkeydown‚ÄĚ, dibujarTeclado);

var cuadrito = document.getElementById(‚Äúarea_de_dibujo‚ÄĚ);
var papel = cuadrito.getContext(‚Äú2d‚ÄĚ)
var ancho = cuadrito.width;

var botonBorrar = document.getElementById(‚ÄúbotoncitoBorrar‚ÄĚ);
var colorUno = document.getElementById(‚ÄúcolorcitoUno‚ÄĚ);
var colorDos = document.getElementById(‚ÄúcolorcitoDos‚ÄĚ);

cuadrito.addEventListener(‚Äúmousedown‚ÄĚ, dibujando);
cuadrito.addEventListener(‚Äúmouseup‚ÄĚ, dibujando);
botonBorrar.addEventListener(‚Äúclick‚ÄĚ, 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==‚Äúmousedown‚ÄĚ)
{
dibujandoMouse=true;
}
else
{
dibujandoMouse=false;
}
cuadrito.addEventListener(‚Äúmousemove‚ÄĚ, 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(‚ÄúOtra tecla‚ÄĚ);
}
}

function borrarPorClick()
{
x = 150;
y = 150;
cuadrito.width = cuadrito.width;
dibujarLinea(‚Äúred‚ÄĚ, x-1, y-1, x+1, y+1, papel);
dibujarLinea(‚Äúblack‚ÄĚ, 1, 1, 1, ancho-1,papel);
dibujarLinea(‚Äúblack‚ÄĚ.value, 1, ancho-1, ancho-1, ancho-1,papel);
dibujarLinea(‚Äúblack‚ÄĚ.value, ancho-1, 1, 1, 1,papel);
dibujarLinea(‚Äúblack‚ÄĚ.value, ancho-1, 1, ancho-1, ancho-1,papel);
}

Les comparto como me quedo.

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.

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!

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√°
}```



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 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> 

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);
}

Reto: 

var mousePresionado = false;

var colorcito = "red";

var x;

var y;

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

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

cuadrito.addEventListener("mousedown",iniciarMouse)

cuadrito.addEventListener("mousemove",dibujarMouse)

cuadrito.addEventListener("mouseup",finalizarMouse)

function iniciarMouse(evento)

{

  mousePresionado = true;

  x = evento.offsetX;

  y = evento.offsetY;

}

function dibujarMouse(evento)

{

  if(mousePresionado)

  {

    var xM = evento.offsetX;

    var yM = evento.offsetY;

    dibujarLinea(colorcito, x,y ,xM, yM, papel);

    x= xM;

    y=yM;

  }

}

function finalizarMouse()

{

  mousePresionado = false;

}

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();

}

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

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>


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(‚Äúdibujo‚ÄĚ);
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 = ‚Äúblack‚ÄĚ;

// funcion (e) es una funcion anonima y solo la usamos para crear el ‚Äúe‚ÄĚ;
dibujoM.addEventListener (‚Äúmousedown‚ÄĚ, 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 (‚Äúmousemove‚ÄĚ, 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 (‚Äúmouseup‚ÄĚ, 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 ‚Äúlapiz‚ÄĚ;
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√≥ ūüė¶

Me compromet√≠ a no avanzar hasta que lo consegu√≠, lo unico que no conoc√≠a era el evento ‚Äúmousemove‚ÄĚ, pero inicialmente estaba funcionando con lineas rectas con mouseup (ver comentario en c√≥digo). Estupendo!



<!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 ‚Äúnuevo‚ÄĚ.

//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);
	}

}

RETO CUMPLIDO, dibuja una línea de diferente color para cada botón del mouse, además tiene la función de dibujar con el movimiento del mouse mientras se tenga presionado un botón.

var boton_mouse = {
IZQ: 0,
SCROLL: 1,
DER: 2
}

var cuadrito = document.getElementById(‚Äúarea_de_dibujo‚ÄĚ)
var papel = cuadrito.getContext(‚Äú2d‚ÄĚ)

var x = 0, y = 0;
var dibujando = false;
var color = ‚Äú‚ÄĚ;

//detecta cuál botón del mouse se oprime y activa la función de iniciar a dibujar
document.addEventListener(‚Äúmousedown‚ÄĚ, evento =>
{
switch(evento.button)
{
case boton_mouse.IZQ:
x = evento.pageX; //lee la coordenada X del mouse dentro de la p√°gina
y = evento.pageY; //lee la coordenada Y del mouse dentro de la p√°gina
dibujando = true; //hace valor ‚Äúverdadero‚ÄĚ una variable para iniciar a dibujar
color = ‚Äúgreen‚ÄĚ; //color verde para click derecho
break;
case boton_mouse.SCROLL:
x = evento.pageX;
y = evento.pageY;
dibujando = true;
color = ‚Äúred‚ÄĚ; //color rojo para el scroll
break;
case boton_mouse.DER:
x = evento.pageX;
y = evento.pageY;
dibujando = true;
color = ‚Äúpink‚ÄĚ; // color rosado para el click izquierdo
break;
}

});

//dibuja la línea mientras se tenga pulsado un botón del mouse
document.addEventListener(‚Äúmousemove‚ÄĚ, evento => {
if (dibujando == true) {
dibujarLinea(color, x - 8, y - 8, evento.pageX - 8, evento.pageY - 8, papel);
x = evento.pageX;
y = evento.pageY;
}
});

//detecta cuando se deja de pulsar un botón del mouse y detiene la función de dibujar
document.addEventListener(‚Äúmouseup‚ÄĚ, evento => {
x = 0;
y = 0;
dibujando = false;
});

dibujarLinea(‚Äúblue‚ÄĚ, 1, 1, 1, 300, papel);
dibujarLinea(‚Äúblue‚ÄĚ, 1, 299, 299, 299, papel);
dibujarLinea(‚Äúblue‚ÄĚ, 1, 1, 299, 1, papel);
dibujarLinea(‚Äúblue‚ÄĚ, 299, 1, 299, 299, papel);

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

JAVA SCRIPT

var lado = document.getElementById ("areadedib");

var en = lado.getContext ("2d");

var x = 150;

var y = 150;

document.addEventListener ("mouseup", dibujar_mouse);

function dibujar_mouse (evento){

  dibujarLinea (x, y, evento.layerX, evento.layerY, "blue" );

  x = evento.layerX;

  y = evento.layerY;

}

function dibujarLinea(x, y,  x2,  y2, color)

{

  en.beginPath();

  en.strokeStyle = color;

  en.lineWidth = 3;

  en.moveTo (x, y);

  en.lineTo (x2, y2);

  en.stroke ();

  en.closePath();



}

HTML

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Dibujando con flechas</title>

  </head>

  <body>

    <canvas width = "300" height="300" id = "areadedib"></canvas>

<p>

  Mueve las flechas del teclado para dibujar

</p>

  <script src="mouseEvent.js"></script>

  </body>

</html>


buenos d√≠as a todos compa√Īeros, a continuaci√≥n comparto el desaf√≠o, quedo atento a sus comentarios, que tengan un excelente d√≠a.


var cuadro = document.getElementById("area_de_dibujo");

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

papel.strokeStyle = "red";

cuadro.addEventListener("mousedown", dibujarMouse);

cuadro.addEventListener("mouseup", detenerDibujoMouse);

function dibujarMouse(evento)

{

  

  papel.beginPath();

  papel.moveTo(evento.clientX-cuadro.offsetLeft, evento.clientY-cuadro.offsetTop);

  cuadro.addEventListener("mousemove", pintar);

}

function detenerDibujoMouse(evento)

{

  

  cuadro.removeEventListener("mousemove", pintar);

}

function pintar(evento)

{

  

  papel.lineTo(evento.clientX-cuadro.offsetLeft, evento.clientY-cuadro.offsetTop);

  papel.stroke();

}

function borrar()

{

  cuadro.width = cuadro.width;

}

![](

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;
}

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 ^_^

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 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

ūüėÉ

![](

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;
    }
  }```

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:

Desafío

Aqu√≠ les dejo el como lo resolv√≠ usando el ‚ÄúSUPER PODER‚ÄĚ de console.log, tambi√©n le agregue un frame al √°rea del canvas y que este responda de acuerdo al tama√Īo que se le indique en el HTML‚Ķ

JS

var estado = 0; //Estado inicial del mouse
var colorLinea = "red"; //Color del trazo del mouse
var colorFrame = "222"; //Color de linea del marco
var canvasSizeWidth = document.getElementById("area_de_dibujo").offsetWidth;//Obtiene el ancho de la etiqueta canvas en el HTML
var canvasSizeHeight = document.getElementById("area_de_dibujo").offsetHeight;//Obtiene el alto de la etiqueta canvas en el HTML


var cuadrito = document.getElementById("area_de_dibujo"); //Var del Canvas en HTML
var papel = cuadrito.getContext("2d");//Tipo de dibujo en canvas
var x; //Coordenada X
var y; //Coordenada Y

//EventListeners
document.addEventListener("mousedown", presionarMouse);//Cuando presionas mouse
document.addEventListener("mouseup", soltarMouse);//Cuando sueltas mouse
document.addEventListener("mousemove", dibujarMouse);//Cuando mueves el mouse


//Color Borde del Canvas
dibujarLinea(colorFrame, 0, 0, canvasSizeWidth, 0, papel)
dibujarLinea(colorFrame, canvasSizeWidth, 0, canvasSizeWidth, canvasSizeHeight, papel)
dibujarLinea(colorFrame, canvasSizeWidth, canvasSizeHeight, 0, canvasSizeHeight, papel)
dibujarLinea(colorFrame, 0, canvasSizeHeight, 0, 0, papel)


//Funcion para MouseMove
function dibujarMouse(evento) {
  if (estado == 1)//Solo dibujara si mouse esta presionado
  {
    dibujarLinea(colorLinea, x, y, evento.layerX, evento.layerY, papel);
  }
  x = evento.layerX;
  y = evento.layerY;
}

// Funcion para MouseDown
function presionarMouse(evento){
  estado = 1;//Mouse presionado
  x = evento.layerX;
  y = evento.layerY;
}

// Funcion para MouseUp
function soltarMouse(evento){
  estado = 0;//Soltar Mouse
  x = evento.layerX;
  y = evento.layerY;
}


//Funcion para dibujar linea / Snippet ejercicio anterior
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal, lienzo){
  lienzo.beginPath();// Inicia el trazo
  lienzo.strokeStyle = color;// Estilo de trazo (color)
  lienzo.lineWidth = 2;// Ancho de la linea
  lienzo.moveTo(xinicial, yinicial);// Donde comienza la linea
  lienzo.lineTo(xfinal, yfinal);// Traza la linea (ubica punto final)
  lienzo.stroke();// Dibuja con el estio de trazo
  lienzo.closePath();// Cierra el dibujo
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con el Mouse</title>
  </head>
  <body>
    <canvas id="area_de_dibujo" width="800" height="600"></canvas>
    <p><strong>Mueve el mouse para que veas que pasa</strong></p>
    <script src="evento_mouse.js"></script>
  </body>
</html>

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>

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(‚Äúmouseup‚ÄĚ, deshabilita); //observa cuando se levanta el click y llama a ala funcion deshabilita
document.addEventListener(‚Äúmousedown‚ÄĚ, habilita); // observa cuando se hace el click y llama a la funcion habilita
document.addEventListener(‚Äúmousemove‚ÄĚ, trayecto); // observa el movimiento del mouse y llama o invoca a la funcion trayecto

var hoja = document.getElementById(‚Äúhoja_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 = ‚Äúred‚ÄĚ; // 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(‚ÄúSolto el click‚ÄĚ); //Mensaje de referencia dentro de la consola
hoja.removeEventListener(‚Äúmousemove‚ÄĚ, dibujoPorClick); // quita la funcion dibujoPorClick para que no siga dibujando al soltar el click
}

function habilita() // funcion habilita
{
console.log(‚Äúhizo click‚ÄĚ); // Mensaje de referencia dentro de la consola
hoja.addEventListener(‚Äúmousemove‚ÄĚ, dibujoPorClick); // Ejecuta la funcion dibujoPorClick mientras halla un click y se mueva el mouse
}

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

Se√Īores Platzi, cordial saludo.

En anterior aporte envi√© la resoluci√≥n completa del dibujo hecho en Canvas sobre la ‚ÄúFlor 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)
    }

}

Les comparto mi aporte, un saludo!


Si hacer uso del mouseUp y el mouseDown solo con el eveto MouseMove es posible hacer el ejercicio.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="mapa" width="300" height="300"></canvas>
	<br/>
	<script type="text/javascript">
		var lienzo = document.getElementById("mapa").getContext("2d");;
		var x,y;

		document.addEventListener("mousemove",moverMouse);

		function moverMouse(evento){
		  (evento.buttons == 1)? dibujarLinea("black",x,y,evento.layerX,evento.layerY,lienzo) : 0;
		  x=evento.layerX;
		  y=evento.layerY;
		}

		function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal,lienzo){
		  lienzo.beginPath();
		  lienzo.strokeStyle=color;
		  lienzo.moveTo(xinicial,yinicial);
		  lienzo.lineTo(xfinal,yfinal);
		  lienzo.stroke();
		  lienzo.closePath();
		}
	</script>
</body>
</html>

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




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

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();
}```

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);
}

Amogus

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

Muy interesante. Mis felicitaciones.

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

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();
}

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;
    }
}
*¬°Fuck yeah!* Con constancia y ganas de aprender todo se puede

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);
}