Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

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

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Qu茅 son las Funciones en JavaScript

13/37
Recursos

Las funciones son herramientas utilizadas en cualquier lenguaje de programaci贸n con la finalidad de reutilizar c贸digo. Con esto, se evita reescribir varias veces el mismo c贸digo, optimizando recursos en el programa.

Dentro de una funci贸n se pueden crear y emplear variables locales. Es decir, se generan, usan y destruyen dentro de la funci贸n. Esto se logra pas谩ndolas a la funci贸n como par谩metros de la misma, seg煤n lo que la funci贸n necesite.

En JavaScript, las funciones no tienen un lugar definido dentro del programa. Estas pueden ser declaradas y descritas al inicio, final, o en cualquier parte del cuerpo del programa. Esto se debe a que JS, en primer lugar, hace una lectura completa del programa, luego ejecuta y guarda en memoria solo las funciones, para despu茅s ir ejecutando el cuerpo del programa.

La principal ventaja, aparte de ordenar el c贸digo, hace que sea m谩s f谩cil de mantener, ya que si se debe realizar alg煤n ajuste, este 煤nicamente se realiza en una parte del c贸digo.

C贸mo escribir una funci贸n en JavaScript

Puedes escribir una funci贸n en JavaScript como en este ejemplo:

function nombreFuncion(parametros) {

//C贸digo que ejecuta la funci贸n

}

Recuerda:

  • Cuando escribes el mismo c贸digo muchas veces, es una mejor idea emplear una funci贸n.

  • Los par谩metros de una funci贸n, son variables dentro de la funci贸n y funcionan exclusivamente dentro de ella.

Aportes 1224

Preguntas 317

Ordenar por:

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

馃惐鈥嶐煉 Ventajas del uso de funciones son las siguientes:
鉁 Reducci贸n de c贸digo
鉁 Legibilidad del programa
鉁 Facilidad en la depuraci贸n
鉁 Mantenimiento

Dejo mi aporte

(

Primero una etiqueta de CSS
<style>
* { padding: 0; margin: 0; }
canvas { background: rgb(85, 83, 83); }
</style>

c贸digo de javascript para la figura

var d = document.getElementById(鈥渓obo鈥);
var lienzo = d.getContext(鈥2d鈥);

dibujarLinea("#F8F8FF", 560, 140, 548, 133);
dibujarLinea("#F8F8FF",548,133,520, 120);
dibujarLinea("#F8F8FF",520,120,513,110);
dibujarLinea("#F8F8FF",513,110,505,100);
dibujarLinea("#F8F8FF",505,100,490,88);
dibujarLinea("#F8F8FF",490,88,490,40);
dibujarLinea("#F8F8FF",490,40,460,70);
dibujarLinea("#F8F8FF",460,70,430,90);
dibujarLinea("#F8F8FF",430,90,460,120);
dibujarLinea("#F8F8FF",490,88,460,120);
dibujarLinea("#F8F8FF",505,100,460,120);
dibujarLinea("#F8F8FF",520,120,460,120);
dibujarLinea("#F8F8FF",513,110,500,120);
dibujarLinea("#F8F8FF",548,133,515,133);
dibujarLinea("#F8F8FF",515,133,460,120);
dibujarLinea("#F8F8FF",515,133,500,170);
dibujarLinea("#F8F8FF",548,133,545,140);
dibujarLinea("#F8F8FF",545,140,558,145);
dibujarLinea("#F8F8FF",560,140,550,170);
dibujarLinea("#F8F8FF",550,170,500,170);
dibujarLinea("#F8F8FF",500,170,460,120);
dibujarLinea("#F8F8FF",430,90,370,170);
dibujarLinea("#F8F8FF",460,120,370,170);
dibujarLinea("#F8F8FF",370,170,435,200);
dibujarLinea("#F8F8FF",430,136,435,200);
dibujarLinea("#F8F8FF",500,170,435,200);
dibujarLinea("#F8F8FF",500,170,495,210);
dibujarLinea("#F8F8FF",495,210,435,200);
dibujarLinea("#F8F8FF",495,210,440,300);
dibujarLinea("#F8F8FF",440,300,435,200);
dibujarLinea("#F8F8FF",440,300,400,260);
dibujarLinea("#F8F8FF",400,260,435,200);
dibujarLinea("#F8F8FF",400,260,370,170);
dibujarLinea("#F8F8FF",370,170,350,220);
dibujarLinea("#F8F8FF",350,220,400,260);
dibujarLinea("#F8F8FF",370,170,290,170);
dibujarLinea("#F8F8FF",290,170,350,220);
dibujarLinea("#F8F8FF",290,170,365,330);
dibujarLinea("#F8F8FF",440,300,405,340);
dibujarLinea("#F8F8FF",405,340,380,310);
dibujarLinea("#F8F8FF",380,310,400,260);
dibujarLinea("#F8F8FF",380,310,365,330);
dibujarLinea("#F8F8FF",350,220,342,280);
dibujarLinea("#F8F8FF",290,170,200,160);
dibujarLinea("#F8F8FF",200,160,120,180);
dibujarLinea("#F8F8FF",200,160,240,220);
dibujarLinea("#F8F8FF",240,220,332,260);
dibujarLinea("#F8F8FF",332,260,240,300);
dibujarLinea("#F8F8FF",240,220,240,300);
dibujarLinea("#F8F8FF",240,300,290,320);
dibujarLinea("#F8F8FF",290,320,365,330);
dibujarLinea("#F8F8FF",120,180,240,220);
dibujarLinea("#F8F8FF",120,180,70,240);
dibujarLinea("#F8F8FF",70,240,40,330);
dibujarLinea("#F8F8FF",40,330,45,410);
dibujarLinea("#F8F8FF",45,410,65,400);
dibujarLinea("#F8F8FF",65,400,118,325);
dibujarLinea("#F8F8FF",118,325,122,230);
dibujarLinea("#F8F8FF",155,191,40,330);
dibujarLinea("#F8F8FF",66,298,65,400);
dibujarLinea("#F8F8FF",122,230,90,365);
dibujarLinea("#F8F8FF",120,260,185,260);
dibujarLinea("#F8F8FF",185,260,240,220);
dibujarLinea("#F8F8FF",185,260,200,360);
dibujarLinea("#F8F8FF",200,360,240,300);
dibujarLinea("#F8F8FF",200,360,145,310);
dibujarLinea("#F8F8FF",145,310,120,260);
dibujarLinea("#F8F8FF",200,360,160,400);
dibujarLinea("#F8F8FF",145,310,125,400);
dibujarLinea("#F8F8FF",125,400,160,400);
dibujarLinea("#F8F8FF",145,310,110,375);
dibujarLinea("#F8F8FF",110,375,130,470);
dibujarLinea("#F8F8FF",135,288,110,375);
dibujarLinea("#F8F8FF",125,400,140,470);
dibujarLinea("#F8F8FF",125,400,175,470);
dibujarLinea("#F8F8FF",160,400,175,470);
dibujarLinea("#F8F8FF",130,470,140,470);
dibujarLinea("#F8F8FF",140,470,155,490);
dibujarLinea("#F8F8FF",175,470,190,475);
dibujarLinea("#F8F8FF",155,490,190,475);
dibujarLinea("#F8F8FF",155,490,190,500);
dibujarLinea("#F8F8FF",190,475,210,490);
dibujarLinea("#F8F8FF",190,500,210,490);
dibujarLinea("#F8F8FF",380,310,385,370);
dibujarLinea("#F8F8FF",385,370,390,420);
dibujarLinea("#F8F8FF",390,420,395,460);
dibujarLinea("#F8F8FF",405,340,395,460);
dibujarLinea("#F8F8FF",365,330,365,440);
dibujarLinea("#F8F8FF",365,440,385,385);
dibujarLinea("#F8F8FF",395,460,425,492);
dibujarLinea("#F8F8FF",405,470,420,470);
dibujarLinea("#F8F8FF",420,470,425,492);
dibujarLinea("#F8F8FF",365,440,395,495);
dibujarLinea("#F8F8FF",425,492,395,495);
dibujarLinea("#F8F8FF",395,460,395,495);
dibujarLinea("#F8F8FF",395,495,375,500);
dibujarLinea("#F8F8FF",375,500,355,455);
dibujarLinea("#F8F8FF",355,455,346,328);

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

Al fin pude hacerlo como quer铆a y as铆 quedo

<code>
```var d = document.getElementById("dibujo");
var lienzo = d.getContext("2d");
function dibujar(color, x_inicial, y_inicial, x_final, y_final) //dentro del parentesis van los parametros de la funcion
{ //lo que va dentro del bloque de codigo es el codigo que se va a repetir cada vez que la funcion es invocada
  lienzo.beginPath();
  lienzo.strokeStyle=color;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}
function rellenar(color, relleno, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.fillStyle = relleno;
  lienzo.moveTo(x1, y1);
  lienzo.lineTo(x2, y2);
  lienzo.lineTo(x3, y3);
  lienzo.lineTo(x4, y4);
  lienzo.lineTo(x5, y5);
  lienzo.stroke();
  lienzo.fill();
  lienzo.closePath();

}
function ojos(color, x, y, r, inicio, final, direccion)
{
  lienzo.beginPath();
  lienzo.strokeStyle=color;
  lienzo.arc(x,y,r,inicio,final,direccion);
  lienzo.stroke();
  lienzo.closePath();
}
dibujar("blak",150, 20, 110, 30);
dibujar("blak", 130, 35, 110, 30);
dibujar("blak", 150, 20, 130, 35);
dibujar("blak", 150, 20, 170, 35);
dibujar("blak", 130, 35, 170, 35);
dibujar("blak", 150, 20, 190, 30);
dibujar("blak", 190, 30, 170, 35);
dibujar("blak", 110, 30, 110, 50);
dibujar("blak", 110, 50, 130, 35);
dibujar("blak", 110, 50, 125, 60);
dibujar("blak", 125, 60, 130, 35);
dibujar("blak", 125, 60, 150, 80);
dibujar("blak", 130, 35, 148, 70);
dibujar("blak", 170, 35, 152, 70);
dibujar("blak", 170, 35, 180, 60);
dibujar("blak", 180, 60, 150, 80);
dibujar("blak", 170, 35, 190, 50);
dibujar("blak", 190, 50, 180, 60);
dibujar("blak", 190, 30, 190, 50);
dibujar("blak", 120, 17, 130, 25);
dibujar("blak", 170, 25, 180, 17);
dibujar("blak", 125, 60, 130, 170);
dibujar("blak", 125, 60, 150, 155);
dibujar("blak", 130, 170, 135, 100);
dibujar("blak", 150, 155, 150, 80);
dibujar("blak", 150, 80, 135, 100);
dibujar("blak", 150, 155, 175, 63);
dibujar("blak", 175, 63, 165, 170);
dibujar("blak", 150, 80, 165, 100);
dibujar("blak", 165, 100,165, 170);
dibujar("blak", 175, 63, 200, 100);
dibujar("blak", 200, 100, 200, 150);
dibujar("blak", 200, 150, 165, 170);
dibujar("blak", 200, 100, 165, 170);
dibujar("blak", 200, 150, 190, 170);
dibujar("blak", 190, 170, 165, 170);
dibujar("blak", 200, 150, 230, 170);
dibujar("blak", 190, 170, 230, 170);
dibujar("blak", 200, 150, 245, 167);
dibujar("blak", 245, 167, 230, 170);
//nariz
rellenar("blak","blak",  145, 75, 148, 70, 152, 70, 155, 75, 150, 80);
//oreja izquierda
rellenar("blak","blak", 120, 17, 110, 30, 110, 10);
//oreja derecha
rellenar("blak","blak", 190, 30, 190, 10, 180, 17);
//patas
rellenar("blak","blak", 130, 170, 150, 155, 165, 170);
//cola
rellenar("blak","blak", 245, 167, 230, 152, 232, 162);

//ojos
ojos("black", 133,55,5, Math.PI*2,Math.PI*1,false);
ojos("black",168,55,5,Math.PI*2,Math.PI*1,false);

con menos codigo y mas detalle xd

Me tard茅 mucho. Pero vali贸 la pena c:

<code<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
    body
    {
      background-color:#13172E;
      color: white;
      font.family: helvetica;
    }
    </style>
    <title> Dibujando con canvas </title>
  </head>
  <body>
    <h1> Dibujo en canvas </h1>
    <canvas width = "300" height = "300" id="dibujito"> </canvas>
    <p> DEBO DEJAR DE VER TANTOS VIDEOS DE FREDDY O ME VOY A ENAMORAR</p>
    <script src= "dibujo.js"></script>
  </body>
</html>
>


`var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

dibujarLinea (鈥渂lue鈥,28,48,28,94)
dibujarLinea (鈥渂lue鈥,28,48,51,48)
dibujarLinea (鈥渂lue鈥,28,72,50,72)
dibujarLinea (鈥渂lue鈥,70,48,70,97)
dibujarLinea (鈥渂lue鈥,70,48,86,51)
dibujarLinea (鈥渂lue鈥,86,51,94,60)
dibujarLinea (鈥渂lue鈥,94,60,89,69)
dibujarLinea (鈥渂lue鈥,89,69,80,73)
dibujarLinea (鈥渂lue鈥,80,73,70,73)
dibujarLinea (鈥渂lue鈥,115,50,115,95)
dibujarLinea (鈥渂lue鈥,115,50,139,50)
dibujarLinea (鈥渂lue鈥,115,72,139,72)
dibujarLinea (鈥渂lue鈥,115,95,139,96)
dibujarLinea (鈥渂lue鈥,83,73,97,97)
dibujarLinea (鈥渂lue鈥,155,49,171,51)
dibujarLinea (鈥渂lue鈥,171,51,182,57)
dibujarLinea (鈥渂lue鈥,182,57,185,70)
dibujarLinea (鈥渂lue鈥,185,70,184,81)
dibujarLinea (鈥渂lue鈥,184,81,179,91)
dibujarLinea (鈥渂lue鈥,179,91,171,95)
dibujarLinea (鈥渂lue鈥,153,95,155,49)

dibujarLinea (鈥渂lue鈥,171,95,153,95)

dibujarLinea (鈥渂lue鈥,199,50,214,50)
dibujarLinea (鈥渂lue鈥,214,50,224,55)
dibujarLinea (鈥渂lue鈥,224,55,229,56)
dibujarLinea (鈥渂lue鈥,229,64,230,74)
dibujarLinea (鈥渂lue鈥,230,74,226,86)
dibujarLinea (鈥渂lue鈥,226,86,218,94)
dibujarLinea (鈥渂lue鈥,218,94,206,95)
dibujarLinea (鈥渂lue鈥,206,95,199,95)
dibujarLinea (鈥渂lue鈥,199,95,199,50)
dibujarLinea (鈥渂lue鈥,239,50,258,77)
dibujarLinea (鈥渂lue鈥,258,77,275,50)
dibujarLinea (鈥渂lue鈥,258,77,258,97)
dibujarLinea (鈥渞ed鈥,166,169,178,151)
dibujarLinea (鈥渞ed鈥,178,151,193,142)
dibujarLinea (鈥渞ed鈥,193,142,211,145)
dibujarLinea (鈥渞ed鈥,211,145,223,165)
dibujarLinea (鈥渞ed鈥,223,165,224,185)
dibujarLinea (鈥渞ed鈥,224,185,213,206)
dibujarLinea (鈥渞ed鈥,213,206,196,226)
dibujarLinea (鈥渞ed鈥,196,226,180,238)
dibujarLinea (鈥渞ed鈥,180,238,166,247)
dibujarLinea (鈥渞ed鈥,166,247,145,236)
dibujarLinea (鈥渞ed鈥,145,236,112,201)
dibujarLinea (鈥渞ed鈥,112,201,106,184)
dibujarLinea (鈥渞ed鈥,106,184,106,163)
dibujarLinea (鈥渞ed鈥,106,163,113,148)
dibujarLinea (鈥渞ed鈥,113,148,128,141)
dibujarLinea (鈥渞ed鈥,128,141,142,143)
dibujarLinea (鈥渞ed鈥,142,143,157,153)
dibujarLinea (鈥渞ed鈥,157,153,160,162)
dibujarLinea (鈥渞ed鈥,160,162,166,169)

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


```

Este ejercicio me recuerda a los gr谩ficos de Star Fox.

dibujarLinea("black", 191, 163, 223, 82);
dibujarLinea("black", 223, 82, 291, 24);
dibujarLinea("black", 291, 24, 191, 163);
dibujarLinea("black", 191, 163, 237, 105);
dibujarLinea("black", 237, 105, 291, 24);
dibujarLinea("black", 9, 182, 147, 154);
dibujarLinea("black", 147, 154, 209, 116);
dibujarLinea("black", 209, 116, 9, 182);
dibujarLinea("black", 9, 182, 211, 111);
dibujarLinea("black", 214, 104, 153, 101);
dibujarLinea("black", 153, 101, 9, 182);
dibujarLinea("black", 153, 101, 141, 102);
dibujarLinea("black", 141, 102, 9, 182);
dibujarLinea("black", 142, 101, 187, 60);
dibujarLinea("black", 187, 60, 196, 60);
dibujarLinea("black", 196, 60, 152, 101);
dibujarLinea("black", 197, 60, 198, 60);
dibujarLinea("black", 198, 60, 217, 94);
dibujarLinea("black", 220, 88, 216, 70);
dibujarLinea("black", 216, 70, 199, 60);
dibujarLinea("black", 127, 110, 137, 85);
dibujarLinea("black", 137, 85, 148, 95);
dibujarLinea("black", 137, 85, 178, 30);
dibujarLinea("black", 178, 30, 170, 75);
dibujarLinea("black", 241, 104, 340, 97);
dibujarLinea("black", 238, 105, 403, 93);
dibujarLinea("black", 403, 93, 285, 111);
dibujarLinea("black", 285, 111, 254, 105);
dibujarLinea("black", 254, 105, 241, 116);
dibujarLinea("black", 241, 116, 229, 116);
dibujarLinea("black", 233, 111, 241, 110);
dibujarLinea("black", 241, 110, 240, 116);
dibujarLinea("black", 251, 108, 284, 111);

Me cost贸 un poquito bastante, fue ensayo y error, pero logr茅 esto 馃槃

Mis apuntes de la Clase:

  • Funciones => Son herramientas utilizadas en cualquier lenguaje, con la finalidad de reutilizar c贸digo, con lo cual se evita reescribir varias veces el c贸digo, en el caso que un cierto bloqyue del mismo deba repetirse en varias secciones del c贸digo.
  • Dentro de una funci贸n se pueden crear y utilizar variables locales, es decir, se crean, utilizan y destruyen dentro de la funci贸n, esto se logra pasando a la funci贸n como par谩metros del mismo seg煤n lo que necesite la funci贸n.
  • Las funciones no tienen un lugar definido dentro del programa, estas pueden ser declaradas y descritas al inicio , final, o en cualquier parte del cuerpo del programa, esto se debe a que JS en primer lugar hace una lectura completa dle programa, y en primer lugar ejecuta y pone en memoria solo las funciones, para despu茅s ir ejecutando el cuerpo del programa.
  • La principal ventaja, aparte de ordenar el c贸digo, hace que sea mas facil de mantener, ya que si se debe realizar alg煤n ajuste, este solo se realiza en solo una parte del c贸digo.

gente llevo 4 horas intentando dibujar en canvas鈥 no sabia que me habia pasado volvi a ver desde el principio toda la clase busque en internet INTENTE DE TODO hasta que despues de esas 4 horas me di cuenta que puse un punto y coma enves de una coma en FUNCTION

Resumen:la mejor forma de aprender es cometer errores

Genial!

Hice un carpincho 鉂わ笍

I鈥檓 love code

No me rendir茅 hasta ser un programador de alto rendimiento 隆隆隆隆

As铆 quedo mi dibujo pero tengo unas dudas las partes que van en rojo ten铆an que ir rellenas pero no pude lograrlo podr铆an decirme donde esta el error en mi c贸digo y de igual manera los ojos no los pude hacer en funci贸n, los tuve que hacer cada uno por separado podr铆an decirme como puedo hacerlos en funci贸n

```

<code>

var d = document.getElementById(鈥渄ibujo鈥);
var lienzo = d.getContext(鈥2d鈥);
function dibujar(color, x_inicial, y_inicial, x_final, y_final) //dentro del parentesis van los parametros de la funcion
{ //lo que va dentro del bloque de codigo es el codigo que se va a repetir cada vez que la funcion es invocada
lienzo.beginPath();
lienzo.strokeStyle=color;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_final, y_final);
lienzo.stroke();
lienzo.closePath();
}
function rellenar(color, relleno, x_inicial, y_inicial, x_final, y_final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.fillStyle = relleno;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_final,y_final);
lienzo.stroke();
lienzo.fill();
lienzo.closePath();

}
dibujar(鈥渂lue鈥,150, 20, 110, 30);
dibujar(鈥渂lue鈥, 130, 35, 110, 30);
dibujar(鈥渂lue鈥, 150, 20, 130, 35);
dibujar(鈥渂lue鈥, 150, 20, 170, 35);
dibujar(鈥渂lue鈥, 130, 35, 170, 35);
dibujar(鈥渂lue鈥, 150, 20, 190, 30);
dibujar(鈥渂lue鈥, 190, 30, 170, 35);
dibujar(鈥渂lue鈥, 110, 30, 110, 50);
dibujar(鈥渂lue鈥, 110, 50, 130, 35);
dibujar(鈥渂lue鈥, 110, 50, 125, 60);
dibujar(鈥渂lue鈥, 125, 60, 130, 35);
dibujar(鈥渂lue鈥, 125, 60, 150, 80);
dibujar(鈥渂lue鈥, 130, 35, 148, 70);
dibujar(鈥渂lue鈥, 170, 35, 152, 70);
dibujar(鈥渂lue鈥, 170, 35, 180, 60);
dibujar(鈥渂lue鈥, 180, 60, 150, 80);
dibujar(鈥渂lue鈥, 170, 35, 190, 50);
dibujar(鈥渂lue鈥, 190, 50, 180, 60);
dibujar(鈥渂lue鈥, 190, 30, 190, 50);
dibujar(鈥渂lue鈥, 120, 17, 130, 25);
dibujar(鈥渂lue鈥, 170, 25, 180, 17);
dibujar(鈥渂lue鈥, 125, 60, 130, 170);
dibujar(鈥渂lue鈥, 125, 60, 150, 155);
dibujar(鈥渂lue鈥, 130, 170, 135, 100);
dibujar(鈥渂lue鈥, 150, 155, 150, 80);
dibujar(鈥渂lue鈥, 150, 80, 135, 100);
dibujar(鈥渂lue鈥, 150, 155, 175, 63);
dibujar(鈥渂lue鈥, 175, 63, 165, 170);
dibujar(鈥渂lue鈥, 150, 80, 165, 100);
dibujar(鈥渂lue鈥, 165, 100,165, 170);
dibujar(鈥渂lue鈥, 175, 63, 200, 100);
dibujar(鈥渂lue鈥, 200, 100, 200, 150);
dibujar(鈥渂lue鈥, 200, 150, 165, 170);
dibujar(鈥渂lue鈥, 200, 100, 165, 170);
dibujar(鈥渂lue鈥, 200, 150, 190, 170);
dibujar(鈥渂lue鈥, 190, 170, 165, 170);
dibujar(鈥渂lue鈥, 200, 150, 230, 170);
dibujar(鈥渂lue鈥, 190, 170, 230, 170);
dibujar(鈥渂lue鈥, 200, 150, 245, 167);
dibujar(鈥渂lue鈥, 245, 167, 230, 170);
//nariz
rellenar(鈥渞ed鈥,鈥渂lue鈥, 145, 75, 148, 70);
rellenar(鈥渞ed鈥,鈥渂lue鈥, 148, 70, 152, 70);
rellenar(鈥渞ed鈥,鈥渂lue鈥, 152, 70, 155, 75);
rellenar(鈥渞ed鈥,鈥渂lue鈥, 145, 75, 150, 80);
rellenar(鈥渞ed鈥,鈥渂lue鈥, 155, 75, 150, 80);
//oreja izquierda
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 120, 17, 110, 30);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 110, 10, 110, 30);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 120, 17, 110, 10);
//oreja derecha
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 190, 30, 190, 10);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 190, 30, 180, 17);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 180, 17, 190, 10);
//patas
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 130, 170, 150, 155);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 165, 170, 150, 155);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 130, 170, 165, 170);
//cola
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 245, 167, 230, 152);
rellenar(鈥渞ed鈥, 鈥渂lue鈥, 230, 152, 232, 162);

lienzo.beginPath();
lienzo.beginPath();
lienzo.strokeStyle=鈥渂lue鈥;
lienzo.arc(133,55,5,Math.PI2,Math.PI1,false);
lienzo.stroke();
lienzo.closePath()

lienzo.beginPath();
lienzo.beginPath();
lienzo.strokeStyle=鈥渂lue鈥;
lienzo.arc(168,55,5,Math.PI2,Math.PI1,false);
lienzo.stroke();
lienzo.closePath()

Les dejo mi c贸digo de dibujo creado con js, cree una funci贸n para dibujar las lineas de acuerdo a las coordenadas entregas, le recomiendo ir probando cada par谩metro para que familiaricen con los comandos usados para dibujar en el canvas.

.- La forma de saber cuando debes ESCRIBIR UNA FUNCI脫Nes cuando estas escribiendo mucho c贸digo repetitivo.

.- Se usa function. Se le definen variables de entrada, dentro del par茅ntesis.

.- Se coloca el c贸digo escrito anteriormente dentro de las llaves. Se eliminan los valores fijos y se colocan las variables.

.- NO IMPORTA d贸nde se escriba la function, ya que en memoria se leen primero todas las function. As铆 funciona JS.

,- Se INVOCA la funci贸n, pas谩ndole valores tal como se defini贸. Se puede ver que responde tal como se espera.

.- Se vuelve a INVOCAR las funci贸n, con otros parametros, cambiando de color y puntos de inicio y fin. Se puede ver que tambien responde.

.- Tenemos el C脫DIGO ORGANIZADO, el html en .html, el JavaScript en .js. YA NO REPETIMOS C脫DIGO, sino que invocamos funciones creadas por nosotros mismos.

Muy buen ejercicio!

Mi nombre en Canvas 馃槂

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
    <style>
    body
    {
      background-color: black;
      color: white;
      font.family: helvetica;
    }
    </style>
  </head>
  <body>
    <h1>Dibujando en canvas</h1>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <p>Asi queda tu dibujo</p>
    <script src="dibujo.js"></script>
  </body>
</html>
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}
dibujarLinea("red", 40, 110, 40, 100);
dibujarLinea("red", 40, 100, 10, 100);
dibujarLinea("red", 10, 100, 10, 120);
dibujarLinea("red", 10, 120, 40, 120);
dibujarLinea("red", 40, 120, 40, 140);
dibujarLinea("red", 40, 140, 10, 140);
dibujarLinea("red", 10, 140, 10, 130);

dibujarLinea("red", 65, 80, 65, 140);
dibujarLinea("red", 50, 100, 80, 100);

dibujarLinea("red", 120, 140, 90, 140);
dibujarLinea("red", 90, 140, 90, 100);
dibujarLinea("red", 90, 100, 120, 100);
dibujarLinea("red", 120, 100, 120, 120);
dibujarLinea("red", 120, 120, 90, 120);

dibujarLinea("red", 130, 140, 130, 100);
dibujarLinea("red", 130, 100, 160, 100);
dibujarLinea("red", 160, 100, 160, 120);
dibujarLinea("red", 160, 120, 130, 120);

dibujarLinea("red", 170, 80, 170, 140);
dibujarLinea("red", 170, 110, 200, 110);
dibujarLinea("red", 200, 110, 200, 140);

dibujarLinea("red", 210, 110, 210, 130);
dibujarLinea("red", 210, 130, 220, 140);
dibujarLinea("red", 220, 140, 230, 140);
dibujarLinea("red", 230, 140, 240, 130);
dibujarLinea("red", 240, 140, 240, 100);
dibujarLinea("red", 240, 110, 230, 100);
dibujarLinea("red", 230, 100, 220, 100);
dibujarLinea("red", 220, 100, 210, 110);

dibujarLinea("red", 250, 140, 250, 100);
dibujarLinea("red", 250, 100, 280, 140);
dibujarLinea("red", 280, 140, 280, 100);

dibujarLinea("red", 290, 140, 290, 100);

dibujarLinea("red", 285, 85, 295, 85);
dibujarLinea("red", 295, 85, 295, 75);
dibujarLinea("red", 295, 75, 285, 75);
dibujarLinea("red", 285, 75, 285, 85);

Les comparto mi dibujo, esto esta genial !!

hice una funcion que utiliza una funcion para hacer cuadrados.

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

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

function dibujar_cuadrado(L,c)
{
  dibujar_linea(c,0,0,L,0); //arriba
  dibujar_linea(c,0,L,L,L);//abajo
  dibujar_linea(c,L,L,L,0);//lado derecho
  dibujar_linea(c,0,0,0,L); //lado izquierdo
}
 dibujar_cuadrado(300,"black");
 dibujar_linea("black",0,0,300,300);

ya le agarre el tiro jaja !!

Al canvas le pueden dar el estributo style con un background-color para notar mejor las lineas.

<canvas style="background-color: grey;"></canvas>

In the name of the M00N

var d = document.getElementById("dibujito"),
    lienzo = d.getContext("2d");

dibujarLinea("black", 230, 30, 215, 15);
dibujarLinea("black", 215, 15, 190, 05);
dibujarLinea("black", 190, 05, 165, 05);
dibujarLinea("black", 165, 05, 140, 15);
dibujarLinea("black", 140, 15, 120, 40);
dibujarLinea("black", 120, 40, 110, 75);
dibujarLinea("black", 110, 75, 110, 105);
dibujarLinea("black", 110, 105, 120, 140);
dibujarLinea("black", 120, 140, 140, 165);
dibujarLinea("black", 140, 165, 165, 180);
dibujarLinea("black", 165, 180, 190, 180);
dibujarLinea("black", 190, 180, 215, 170);
dibujarLinea("black", 215, 170, 230, 155);
dibujarLinea("black", 230, 155, 200, 150);
dibujarLinea("black", 200, 150, 180, 135);
dibujarLinea("black", 180, 135, 170, 105);
dibujarLinea("black", 170, 105, 170, 75);
dibujarLinea("black", 170, 75, 180, 55);
dibujarLinea("black", 180, 55, 200, 35);
dibujarLinea("black", 200, 35, 232, 30);

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

Dejo mi aporte para los fanaticos de los comics y la programacion

![](

tremendo ejercicio!

![](

Asi quedo mi proyecto espero practiquen

Estaba haciendo fri贸 y pens茅 en navidad

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

dibujarArbol("green",150,50,100,100)
dibujarArbol("green",100,100,130,100)
dibujarArbol("green",130,100,80,150)
dibujarArbol("green",80,150,110,150)
dibujarArbol("green",110,150,60,200)
dibujarArbol("green",60,200,240,200)
dibujarArbol("green",240,200,190,150)
dibujarArbol("green",190,150,220,150)
dibujarArbol("green",220,150,170,100)
dibujarArbol("green",170,100,200,100)
dibujarArbol("green",200,100,150,50)

dibujarArbol("brown",140,200,140,240)
dibujarArbol("brown",140,240,160,240)
dibujarArbol("brown",160,240,160,200)

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

Dejo mi aporte

No es mucho, pero lo intente jaja

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

// Televisor
dibuTele("grey", 30, 50, 270, 50, 2);
dibuTele("grey", 30, 50, 30, 200, 2);
dibuTele("grey", 30, 200, 270, 200, 2);
dibuTele("grey", 270, 200, 270, 50, 2);
dibuTele("grey", 40, 60, 260, 60, 2);
dibuTele("grey", 40, 60, 40, 190, 2);
dibuTele("grey", 40, 190, 260, 190, 2);
dibuTele("grey", 260, 190, 260, 60, 2);

// Antena
dibuTele("grey", 150, 50, 60, 10, 3);
dibuTele("grey", 150, 50, 240, 10, 3);

// Bandera
dibuTele("red", 60, 95, 240, 95, 30);
dibuTele("white", 60, 125, 240, 125, 30);
dibuTele("blue", 60, 155, 240, 155, 30);


function dibuTele(color, xinicio, yinicio, xfinal, yfinal, ancho)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.lineWidth = ancho;
    lienzo.moveTo(xinicio, yinicio);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();    
}

Por favor el que vea este comentario que pruebe este codigo鈥 me lo e currado bastante xDD y la risa esta asegurada xDDD 馃槂

var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

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

//tower
//linea
dibujarLinea(鈥渂lack鈥, 168, 90, 278, 90);
//t
dibujarLinea(鈥渞ed鈥, 180, 60, 180, 80);
dibujarLinea(鈥渂lack鈥, 170, 60, 190, 60);
//o
dibujarLinea(鈥渞ed鈥, 194, 60, 194, 80);
dibujarLinea(鈥渂lack鈥, 194, 60, 206, 60);
dibujarLinea(鈥渞ed鈥, 206, 60, 206, 80);
dibujarLinea(鈥渂lack鈥, 194, 80, 206, 80);
//w
dibujarLinea(鈥渞ed鈥, 214, 60, 220, 80);
dibujarLinea(鈥渂lack鈥, 220, 80, 225, 65);
dibujarLinea(鈥渞ed鈥, 225, 65, 230, 80);
dibujarLinea(鈥渂lack鈥, 230, 80, 235, 60);
//e
dibujarLinea(鈥渞ed鈥, 242, 60, 242, 80);
dibujarLinea(鈥渂lack鈥, 242, 60, 252, 60);
dibujarLinea(鈥渞ed鈥, 242, 70, 252, 70);
dibujarLinea(鈥渂lack鈥, 242, 80, 252, 80);
//r
dibujarLinea(鈥渞ed鈥, 260, 60, 260, 80);
dibujarLinea(鈥渂lack鈥, 260, 60, 275, 60);

//$
dibujarLinea(鈥済reen鈥, 340, 60, 310, 60);
dibujarLinea(鈥済reen鈥, 310, 60, 310, 85);
dibujarLinea(鈥済reen鈥, 310, 85, 340, 85);
dibujarLinea(鈥済reen鈥, 340, 85, 340, 110);
dibujarLinea(鈥済reen鈥, 340, 110, 310, 110);
dibujarLinea(鈥済reen鈥, 320, 57, 320, 113);
dibujarLinea(鈥済reen鈥, 330, 57, 330, 113);
dibujarLinea(鈥済reen鈥, 310, 110, 310, 98);
dibujarLinea(鈥済reen鈥, 340, 60, 340, 72);
//trump
//linea
dibujarLinea(鈥渂lack鈥, 188, 130, 300, 130);
//t
dibujarLinea(鈥渞ed鈥, 200, 100, 200, 120);
dibujarLinea(鈥渂lack鈥, 190, 100, 210, 100);
//r
dibujarLinea(鈥渞ed鈥, 214, 100, 214, 120);
dibujarLinea(鈥渂lack鈥, 214, 100, 230, 100);
//u
dibujarLinea(鈥渞ed鈥, 238, 100, 238, 120);
dibujarLinea(鈥渂lack鈥, 238, 120, 252, 120);
dibujarLinea(鈥渞ed鈥, 252, 120, 252, 100);
//m
dibujarLinea(鈥渞ed鈥, 262, 100, 262, 120);
dibujarLinea(鈥渂lack鈥, 262, 100, 268, 110);
dibujarLinea(鈥渞ed鈥, 268, 110, 275, 100);
dibujarLinea(鈥渂lack鈥, 275, 100, 275, 120);
//p
dibujarLinea(鈥渞ed鈥, 288, 100, 288, 122);
dibujarLinea(鈥渂lack鈥, 288, 100, 298, 100);
dibujarLinea(鈥渞ed鈥, 298, 100, 298, 112);
dibujarLinea(鈥渂lack鈥, 288, 112, 298, 112);

// lineas vertical (paredes)
dibujarLinea(鈥渂lack鈥, 10, 200, 10, 500);
dibujarLinea(鈥済old鈥, 150, 50, 150, 500);
dibujarLinea(鈥済old鈥, 350, 50, 350, 500);
dibujarLinea(鈥渂lack鈥, 490, 270, 490, 500);

// lineas horizontales (techos)
dibujarLinea(鈥渂lack鈥, 10, 200, 150, 200);
dibujarLinea(鈥済old鈥, 150, 50, 350, 50);
dibujarLinea(鈥渂lack鈥, 490, 270, 350, 270);

// puerta 1
dibujarLinea(鈥渂lack鈥, 50, 460, 50, 500);
dibujarLinea(鈥渂lack鈥, 50, 460, 100, 460);
dibujarLinea(鈥渂lack鈥, 100, 460, 100, 500);
dibujarLinea(鈥済old鈥, 75, 460, 75, 500);

//puerta 2
dibujarLinea(鈥渂lack鈥, 200, 460, 200, 500);
dibujarLinea(鈥渂lack鈥, 200, 460, 300, 460);
dibujarLinea(鈥渂lack鈥, 300, 460, 300, 500);
dibujarLinea(鈥済old鈥, 250, 460, 250, 500);

//puerta 3
dibujarLinea(鈥渂lack鈥, 390, 460, 390, 500);
dibujarLinea(鈥渂lack鈥, 390, 460, 450, 460);
dibujarLinea(鈥渂lack鈥, 450, 460, 450, 500);
dibujarLinea(鈥済old鈥, 420, 460, 420, 500);

Hice un pixel art de Mega Man :T
Tomo mucho m谩s tiempo del que deber铆a haber invertido pero ah铆 esta:

me siento pro dibujando lineas jsjssjaksjldjalsd

dibujarlinea(鈥測ellow鈥 , 30, 20, 30, 110)
dibujarlinea(鈥測ellow鈥 , 50, 20, 50, 110)
dibujarlinea(鈥測ellow鈥 , 70, 20, 70, 110)
dibujarlinea(鈥測ellow鈥 , 30, 110, 40, 120)
dibujarlinea(鈥測ellow鈥 , 40, 120, 50, 110)
dibujarlinea(鈥測ellow鈥 , 50, 110, 60, 120)
dibujarlinea(鈥測ellow鈥 , 60, 120, 70, 110)
dibujarlinea(鈥測ellow鈥 , 30, 20, 70, 20)
dibujarlinea(鈥渞ed鈥 , 30, 20, 40, 10)
dibujarlinea(鈥渞ed鈥 , 40, 10, 60, 10)
dibujarlinea(鈥渞ed鈥 , 60, 10, 70, 20)
dibujarlinea(鈥渂lack鈥 , 30, 110, 50, 150)
dibujarlinea(鈥渂lack鈥 , 50, 150, 70, 110)
dibujarlinea(鈥渂lack鈥 , 40, 130, 60, 130)
un mini l谩piz xdxd

Hola por ac谩 les dejo un bello dibujo:

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

dibujarLinea("red", 10, 10, 250, 10);
dibujarLinea("red", 250, 10, 250, 250);
dibujarLinea("red", 250, 250, 10, 250);
dibujarLinea("red", 10, 250, 10, 10);
dibujarLinea("blue", 10, 10, 250, 250);
dibujarLinea("blue", 10, 250, 250, 10);
dibujarLinea("blue", 10, 10, 250, 250);
dibujarLinea("blue", 130, 60, 130, 200);
dibujarLinea("blue", 60, 130, 200, 130);
dibujarLinea("red", 60, 130, 130, 60);
dibujarLinea("red", 60, 130, 130, 200);
dibujarLinea("red", 130, 60, 200, 130);
dibujarLinea("red", 200, 130, 130, 200);
dibujarLinea("green", 60, 130, 10, 10);
dibujarLinea("green", 10, 10, 130, 60);
dibujarLinea("green", 10, 250, 130, 200);
dibujarLinea("green", 10, 250, 60, 130);
dibujarLinea("green", 250, 250, 130, 200);
dibujarLinea("green", 250, 250, 200, 130);
dibujarLinea("green", 250, 10, 130, 60);
dibujarLinea("green", 250, 10, 200, 130);

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

馃憠P de Platzi 馃槀

Que genial como de una forma tan pedag贸gica nos va introduciendo Freddy en el mundo de la programaci贸n. Realmente estoy emocionado por todo lo que queda por aprender.

Hola, usando los conocimientos de hasta ahora en este curso hice una calculadora que dibuja el s铆mbolo de la operaci贸n que se ha realizado.
Les comparto el codigo y les INVITO A QUE LO PRUEBEN:
//CODIGO DE LA CALCULADORA
var valor1 = prompt(鈥淚ngresa tu primer valor鈥);
var valor2 = prompt(鈥淚ngresa tu segundo valor鈥);
valor1 = parseFloat(valor1);
valor2 = parseFloat(valor2);
var operacion = prompt("驴Que operaci贸n quieres realizar? \n 1 es Suma, 2 es Resta, 3 es Multiplicaci贸n y 4 es divisi贸n");
var nombre;
operacion = parseInt(operacion);
if (operacion == 1)
{
resultado = valor1 + valor2
nombre = (鈥淪uma鈥);
}
else if(operacion == 2)
{
resultado = valor1 - valor2;
nombre = (鈥渞esta鈥);
}
else if (operacion == 3)
{
resultado = valor1 * valor2;
nombre = (鈥渕ultiplicaci贸n鈥);
}
else if (operacion == 4)
{
resultado = valor1 / valor2;
nombre = (鈥渄ivisi贸n鈥);
}
else
{
resultado = 100000000000;
nombre = (鈥淥peraci贸n irreal鈥);
}
resultado = parseFloat(resultado);
document.write(鈥淓l resultado de tu " + nombre + " es igual a <strong>鈥 + resultado + 鈥</strong>鈥);

//CODIGO DEL CANVAS
var d = document.getElementById(鈥渟imbolo鈥); //Obteniendo el elemento del canvas en el html
var trazo = d.getContext(鈥2d鈥) //Vamos a dibujar en 2 dimensiones

function dibujarLinea (color, xinicial, yinicial, xfinal, yfinal) //funcion para dibujar varias lineas
{
trazo.beginPath(color, xinicial, yinicial, xfinal, yfinal);
trazo.strokeStyle = color;
trazo.moveTo(xinicial, yinicial);
trazo.lineTo(xfinal, yfinal);
trazo.stroke();
trazo.closePath();
}

if (operacion == 1)
{
dibujarLinea(鈥渂lack鈥, 100, 100, 200, 100);
dibujarLinea(鈥渂lack鈥, 100, 100, 100, 200);
dibujarLinea(鈥渂lack鈥, 100, 200, 0, 200);
dibujarLinea(鈥渂lack鈥, 0, 200, 0, 300);
dibujarLinea(鈥渂lack鈥, 0, 300, 100, 300);
dibujarLinea(鈥渂lack鈥, 100, 300, 100, 400);
dibujarLinea(鈥渂lack鈥, 100, 400, 200, 400);
dibujarLinea(鈥渂lack鈥, 200, 400, 200, 300);
dibujarLinea(鈥渂lack鈥, 200, 300, 300, 300);
dibujarLinea(鈥渂lack鈥, 300, 300, 300, 200);
dibujarLinea(鈥渂lack鈥, 300, 200, 200, 200);
dibujarLinea(鈥渂lack鈥, 200, 200, 200, 100);
}
else if (operacion == 2)
{
dibujarLinea(鈥渂lack鈥, 100, 100, 400, 100);
dibujarLinea(鈥渂lack鈥, 400, 100, 400, 200);
dibujarLinea(鈥渂lack鈥, 400, 200, 100, 200);
dibujarLinea(鈥渂lack鈥, 100, 200, 100, 100);

}
else if (operacion == 3)
{
dibujarLinea(鈥渂lack鈥, 100, 300, 300, 100);
dibujarLinea(鈥渂lack鈥, 300, 100, 400, 100);
dibujarLinea(鈥渂lack鈥, 400, 100, 200, 300);
dibujarLinea(鈥渂lack鈥, 200, 300, 100, 300);
dibujarLinea(鈥渂lack鈥, 300, 300, 100, 100);
dibujarLinea(鈥渂lack鈥, 100, 100, 200, 100);
dibujarLinea(鈥渂lack鈥, 200, 100, 400, 300);
dibujarLinea(鈥渂lack鈥, 400, 300, 300, 300);
}
else if (operacion == 4)
{
dibujarLinea(鈥渂lack鈥, 100, 300, 300, 100);
dibujarLinea(鈥渂lack鈥, 300, 100, 400, 100);
dibujarLinea(鈥渂lack鈥, 400, 100, 200, 300);
dibujarLinea(鈥渂lack鈥, 200, 300, 100, 300);
}

Quiz谩 no se aprecia en mi dibujo, pero mi representaci贸n de una de las primeras c谩maras estenopeicas. 馃槀

![](

Optimize mi codigo del video anterior

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
console.log(lienzo);

//FUNCIONES
//------------------Dibujar Lineas
function dLine(color, grosor, x1, y1, x2, y2)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color
  lienzo.lineWidth = grosor
  lienzo.moveTo(x1,y1);
  lienzo.lineTo(x2,y2);
  lienzo.stroke();
  lienzo.closePath()
}
//------------------Dibujar Cuadrado
function dRect(colore, colori, grosor, x1, y1, x2, y2)
{
  lienzo.beginPath();
  lienzo.strokeStyle = colore
  lienzo.fillStyle = colori
  lienzo.lineWidth = grosor
  lienzo.rect(x1, y1, x2, y2);
  lienzo.stroke();
  lienzo.fill();
  lienzo.closePath()
}
//------------------Escribir Texto
function dtexto(formato,color,x,y,texto)
{
  lienzo.font = formato
    lienzo.fillStyle = color
  lienzo.fillText(texto,x,y);
}

//DIBUJO
//Marco de canva
dRect("#943126","transparent","20",0,0,300,300)
//Bloque Rojo
dRect("transparent","#943126","1",20,20,150,150)
//Lineas
dLine("White","20",55,180,75,160)
dLine("White","20",75,170,75,100)
dLine("White","10",68,104,85,93)
dLine("White","20",160,110,160,170)
//Cuadros edificio
dRect("White","transparent","15",90,70,60,95)
dRect("White","transparent","5",112,75,18,90)
dRect("White","transparent","5",90,90,60,55)
dRect("White","transparent","5",90,110,60,20)
//Texto
dtexto("bold 30px Verdana", "Black", 150, 160, "FRANK")
dtexto("bold 30px Verdana", "Black", 75, 185, "GRANADOS")

dtexto("bold 10px Arial", "Black", 20, 265, "Sigueme en Instagram:")
dtexto("bold 10px Arial", "Black", 20, 280, "@frankogranados")

Nota:
JavaScript lee todo el c贸digo y guarda las funciones en memoria antes de ejecutar el c贸digo.
Es por eso que podemos declarar las funciones al final del programa.
Esto no sucede en otros leguajes de programaci贸n (como python) que leen el cogido de arriba abajo y no pueden llamar a una funci贸n antes de ser declarada

Ac谩 dejo algunos datos importantes:

  1. Para declarar funciones se escribe la palabra function seguido del nombre de la funcion (puede ser cualquiera, siguiendo las reglas de asignacion de nombres a variables), seguido de los parametros de la funcion entre parentesis

  2. Los parametros son variables, por lo tanto se deben seguir las reglas de asignacion de nombres a variables.

  3. En javascript primero se cargan las funciones en la memoria y luego el resto del codigo, por lo tanto, no importa donde se declare la funcion dentro del codigo.

Les dejo el c贸digo para que dibujen un coraz贸n en un canvas de 500px por 500px, para los programadores enamorados jaja

//Inicia c贸digo:
var d = document.getElementById(鈥渄ibujito鈥); //M茅todo que te regresa elemento
var lienzo = d.getContext(鈥2d鈥); //getContext es m茅todo del canvas y est谩 en 2d
console.log(lienzo);

function dibujarLinea(color,xInicial,yInicial,xFinal,yFinal) {
lienzo.beginPath(); //inicia el camino
lienzo.strokeStyle = color; //color de dibujo
lienzo.moveTo(xInicial,yInicial); //punto de inicio
lienzo.lineTo(xFinal,yFinal); //punto de fin
lienzo.stroke(); //dibujamos la raya
lienzo.closePath(); //termina camino
}

dibujarLinea(鈥渞ed鈥,250,500,400,300); //diagonal derecha
dibujarLinea(鈥渞ed鈥,250,500,100,300); //diagonal izquierda

dibujarLinea(鈥渞ed鈥,400,300,400,250); //l铆nea recta vertical derecha
dibujarLinea(鈥渞ed鈥,100,300,100,250); //l铆nea recta vertical izquierda

dibujarLinea(鈥渞ed鈥,400,250,350,200); //diagonal de arriba, derecha
dibujarLinea(鈥渞ed鈥,100,250,150,200); //diagonal de arriba, izquierda

dibujarLinea(鈥渞ed鈥,350,200,300,200); //l铆nea recta horizontal derecha
dibujarLinea(鈥渞ed鈥, 150,200,200,200); //l铆nea recta horizontal izquierda

dibujarLinea(鈥渞ed鈥,300,200,250,250); //final uni贸n derecha
dibujarLinea(鈥渞ed鈥,200,200,250,250); //final uni贸n izquierda

Sugiero seguir los consejos de los dem谩s comentarios y divertirte un poco con los estilos, apenas 7 lineas m谩s de c贸digo pueden hacer un gran cambio

    <style type="text/css">
      body
      {
        background-color: black;
        color: yellow;
        font-family: Arial;
      }
    </style>

![](

Les comparto Mi c贸digo dibujando en CANVAS

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

dibujarLinea("yellow", 150, 150, 150, 50);
dibujarLinea("red", 150, 150, 50, 150);
dibujarLinea("blue", 50, 150, 50, 50);
dibujarLinea("green", 50, 50, 150 , 50);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo.beginPath(); //poner el lapiz sobre el papel (beginPath) Iniciar un camino
  lienzo.strokeStyle = color; // elegir el color de la linea (variable)
  lienzo.moveTo(xinicial, yinicial); // donde va arrancar la linea
  lienzo.lineTo(xfinal, yfinal); // trazar la linea
  lienzo.stroke(); //dibujar la linea con el estilo rojo
  lienzo.closePath(); //levanta el lapiz
}```

Me gust贸 mi resultado.~

Aqu铆 mi pr谩ctica dibujando con Canvas dada la funci贸n vista en clase 馃拋馃従鈥嶁檧锔

He realizado muchisimos cursos de programaci贸n de HTML, JS. Y me atrever铆a a afirmar y defender con todas las de la ley que ESTE es sin duda el mejor de todos. Profesor excelente, tono de voz perfecto, modo de ense帽ar ideal. Voy corriendo a decirle a mi prima de 11 a帽os que lo haga y aprenda a programar y de bien seguro que no se pierde en ning煤n momento y una vez cumpla la mayor铆a de edad ya podr谩 trabajar de frontend developer para Google. Muchas gracias , Freddy, mira que este tipo de clases suelen ser un rollo, pero t煤 te encargas de hacerlo ameno y entretenido. En ning煤n momento se me ha hecho pesado, en NING脷N momento!

Tercer intento:

Apuntes de la clase.

var d = document.getElementById("dibujito")
var lienzo = d.getContext("2d")


dibujarLineaEnCanva(1,1,1,150,"red")
dibujarLineaEnCanva(1,150,90,250,"red")
dibujarLineaEnCanva(90,250,200,250,"red")
dibujarLineaEnCanva(200,250,1,1,"red")

dibujarLineaEnCanva(150,150,300,10,"red")
dibujarLineaEnCanva(300,10, 299,120,"red")
dibujarLineaEnCanva(299,120,270,150,"red")
dibujarLineaEnCanva(270,150,150,150,"red")




function dibujarLineaEnCanva(x,y,xf,yf,color)
{
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(x, y);
    lienzo.lineTo(xf, yf);
    lienzo.stroke();
    lienzo.closePath();
}

Hize el logo de valorant 馃槂

un cubo

var d = document.getElementById('dibujito'); //etiqueta canvas
var lienzo = d.getContext("2d");  //area o lienzo

dibujarLinea("red", 100, 100, 200, 100);
dibujarLinea("red", 200 ,100, 200 ,200);
dibujarLinea("red", 200, 200, 100, 200);
dibujarLinea("red", 100 ,200, 100 ,100);
dibujarLinea("red", 100 ,100, 150 ,50);
dibujarLinea("red", 150 ,50, 250 ,50);
dibujarLinea("red", 250 ,50, 200 ,100);
dibujarLinea("red", 250 ,50, 250 ,150);
dibujarLinea("red", 250 ,150, 200 ,200);
dibujarLinea("red", 100 ,200, 150 ,150);
dibujarLinea("red", 150 ,150, 250 ,150);
dibujarLinea("red", 250 ,50, 200 ,100);
dibujarLinea("red", 150 ,150, 150 ,50);

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

Un lindo te amo uwu

var d = document.getElementById(鈥渄ibujo鈥);
var lienzo = d.getContext(鈥2d鈥);

function dibujarLinea(color, xinicial1, yinicial1, xfinal1, yfinal1)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial1,yinicial1);
lienzo.lineTo (xfinal1,yfinal1);
lienzo.stroke();
lienzo.closePath();
}

dibujarLinea(鈥渂lue鈥,10,40, 40, 40);
dibujarLinea(鈥渂lue鈥,25,40, 25, 70);
dibujarLinea(鈥減ink鈥, 60, 40, 60, 70);
dibujarLinea(鈥減ink鈥, 60, 40, 80, 40);
dibujarLinea(鈥減ink鈥, 60, 55, 75, 55);
dibujarLinea(鈥減ink鈥, 60, 70, 80, 70);
dibujarLinea(鈥済reen鈥, 25, 100 , 10, 130);
dibujarLinea(鈥済reen鈥, 25, 100 , 40, 130);
dibujarLinea(鈥済reen鈥, 15, 120, 35, 120);
dibujarLinea(鈥渙range鈥, 60, 100, 55, 130);
dibujarLinea(鈥渙range鈥, 60, 100, 70, 120);
dibujarLinea(鈥渙range鈥, 80, 100, 70, 120);
dibujarLinea(鈥渙range鈥, 80, 100, 85, 130);
dibujarLinea(鈥渂rown鈥, 100, 100, 100, 130);
dibujarLinea(鈥渂rown鈥, 125, 100, 125, 130);
dibujarLinea(鈥渂rown鈥, 100, 100, 125, 100);
dibujarLinea(鈥渂rown鈥, 100, 130, 125, 130);
dibujarLinea(鈥渞ed鈥, 50, 180, 80, 200);
dibujarLinea(鈥渞ed鈥, 50, 180, 80, 160);
dibujarLinea(鈥渞ed鈥, 80, 160, 90, 160);
dibujarLinea(鈥渞ed鈥, 80, 180, 90, 180);
dibujarLinea(鈥渞ed鈥, 80, 200, 90, 200);
dibujarLinea(鈥渞ed鈥, 90, 160, 90, 200);

Clases de Platzi + Tiempo Libre = (v2)

console.log("Eureka");
var s2 = document.getElementById("s1");
var s3 = s2.getContext("2d");
function s4(x1, y1, x2, y2)
{
  s3.beginPath();
  s3.strokeStyle = "white";
  s3.moveTo(x1, y1);
  s3.lineTo(x2, y2);
  s3.stroke();
  s3.closePath();
}
s4(0, 0, 300, 0);
s4(300, 0, 300, 300);
s4(300, 300, 0, 300);
s4(0, 300, 0, 0);
s4(0, 0, 300, 300);
s4(300, 0, 0, 300);
s4(150, 0, 150, 300);
s4(0, 150, 300, 150);
s4(75, 0, 75, 300);
s4(225, 0, 225, 300);
s4(0, 75, 300, 75);
s4(0, 225, 300, 225);
s4(75, 0, 300, 225);
s4(150, 0, 300, 150);
s4(225, 0, 300, 75);
s4(0, 75, 225, 300);
s4(0, 150, 150, 300);
s4(0, 225, 75, 300);
s4(75, 0, 0, 75);
s4(150, 0, 0, 150);
s4(225, 0, 0, 225);
s4(300, 75, 75, 300);
s4(300, 150, 150, 300);
s4(300, 225, 225, 300);
s4(37.5, 0, 37.5, 300);
s4(112.5, 0, 112.5, 300);
s4(187.5, 0, 187.5, 300);
s4(262.5, 0, 262.5, 300);
s4(0,37.5, 300, 37.5);
s4(0, 112.5, 300, 112.5);
s4(0, 187.5, 300, 187.5);
s4(0, 262.5, 300, 262.5);

fue algo complicado pero haciendo algunos ejercicios ya se ve mas sencillo, aqu铆 esta el mio, pueden intentar algo parecido.

Las funciones son muy importantes, puesto que simplifican el trabajo en cuanto a la re-utilizaci贸n de c贸digo.

/* Obteniendo el elemento por su id */
let d = document.getElementById('dibujito');/* id del canvas */
let lienzo = d.getContext('2d');/* lienzo del canvas en 2d */
console.log(lienzo);

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

/* invocando la funcion dibujar linea */
dibujarLinea('blue', 0, 299, 100,299);
dibujarLinea('blue', 100, 299, 100,249);
dibujarLinea('blue', 100, 249, 150,249);
dibujarLinea('blue', 150, 249, 150,189);
dibujarLinea('blue', 150, 189, 200,189);
dibujarLinea('blue', 200, 189, 200,139);
dibujarLinea('blue', 200, 139, 250,139);
dibujarLinea('blue', 250, 139, 250,89);
dibujarLinea('blue', 250, 89, 300,89);
/* dibujando la puerta */
dibujarLinea('green', 280, 89, 280,39);
dibujarLinea('green', 280, 39, 300,39);
dibujarLinea('green', 300, 39, 300,89);
dibujarLinea('black', 285, 69, 295,69);
dibujarLinea('black', 295, 69, 295,49);
dibujarLinea('black', 295, 49, 285,49);```

Ah铆 va mi resumen 馃槂

var d = document.getElementById("dibujito");//llamo al canvas desde el html
var lienzo = d.getContext("2d");// en la letra d esta "dibujito" get.context permite obtener el area para dibujar y es en 2 dimensiones

lienzo.beginPath(); // iniciar el trazo
lienzo.strokeStyle = "red"; //el color de la l铆nea
lienzo.moveTo(50,10);  // pon el lapiz en x=100 y =100 ...
lienzo.lineTo(250,2);  //dibujar la l铆nea hacia...
lienzo.stroke();  //stroke dibuja la l铆nea
lienzo.closePath(); // para cerrar el trazo

lienzo.beginPath(); 
lienzo.strokeStyle = "blue"; 
lienzo.moveTo(180,10);  
lienzo.lineTo(290,200);  
lienzo.stroke();  
lienzo.closePath();

// todo lo anterior se puede crear en una funci贸n
function dibujarlinea (color, xinicial, yinicial, xfinal, yfinal){
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal,yfinal);
    lienzo.stroke();
    lienzo.closePath();
}
dibujarlinea("green", 10, 300, 220, 10);
dibujarlinea("pink", 300, 10, 10, 220);```

Por fin estoy de vacaciones, ya me puedo poner serio con el curso. :鈥)

Hola Freddy me quede trabado en esta clase, me sale un mensaje de error en la consola y por lo tanto no puedo hacer el trazo. Espero tu ayuda
Uncaught typeError: Cannot read property 鈥榞etContext鈥 of null dibujo.js:2 at dibujo.js:2

Mira Un Barco Rosa!

<code>

function DibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
console.log (lienzo);
DibujarLinea("pink", 250, 200, 200, 250);
DibujarLinea("Pink", 200, 250, 50, 250);
DibujarLinea("pink", 50, 250, 10, 200);
DibujarLinea("Pink", 10, 200, 250, 200);
DibujarLinea("pink", 100, 200, 100, 10);
DibujarLinea("Pink", 100, 10, 50, 150);
DibujarLinea("pink", 50, 150, 200, 150);
DibujarLinea("Pink", 200, 150, 120, 10);
DibujarLinea("pink", 120, 10, 120, 200);

Y recuerden: Las funciones no son solo exclusivas de canvas para dibujar l铆neas, se puede usar en toooodo javascript.
ejemplo:

<html>
<head>
</head>
<body>
	<script>
		function escribir_en_pantalla(texto)
		{
			texto=prompt("Escribe algo de texto:")
			document.write("<hr> <br> <strong><center>" + texto + "</center></strong>");
		}
		escribir_en_pantalla();
		escribir_en_pantalla();
		escribir_en_pantalla();
	</script>
</body>
</html>

alert(鈥淣os leemos luego鈥);

Encontr茅 una forma de engrosar las l铆neas

lienzo.lineWidth = grosor;

agregando grosor a la function y asignando el valor en los par谩metros de la variable.

nombre soybarbaro en esto de la programaci贸n.

si todos los cursos relacionados con programaci贸n los imparte 茅l o quienes lo imparten poseen esta capacidad de transmitir conocimiento con este nivel de vocaci贸n me inscribo de una cuando acabe el basic

bien dif铆cil este tema, pero al fin logre entender su l贸gica
dibujarLinea(鈥渞ed鈥, 0, 0, 300, 300);
dibujarLinea(鈥渂lue鈥, 300, 0, 0, 300);
dibujarLinea(鈥測ellow鈥, 0, 0, 300, 0);
dibujarLinea(鈥渂lack鈥, 0, 0, 0, 300);
dibujarLinea(鈥渂rown鈥, 150, 0, 150, 300);
dibujarLinea(鈥済reen鈥, 0, 150, 300, 150);
dibujarLinea(鈥減urple鈥, 300, 300, 300, 0);
dibujarLinea(鈥渓ight blue鈥, 300, 300, 0, 300);

con eso lo entend铆 yo! si les sirve de ayuda primero lo dibuje y plante en una hoja, luego es f谩cil deducirla con (x1,y1)
angulo superior izquierdo y (x2y2) angulo inferior derecha.

Super bueno! Comparto mi c贸digo en caso alguien lo necesite.

var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

dibujarLinea(鈥減ink鈥, 10, 300, 220, 10);
dibujarLinea(鈥測ellow鈥, 300, 10, 10, 220);

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

Sencillo pero me hizo muy feliz 鉂わ笍

Ama estoy programando :V

Hola! he estado practicando con las funciones para hacer un dibujo de una ventana y de una casa. Espero que les guste.
Ventana:


Casa:


PD: Cambie las variables y el identificador por 鈥渓ienzo鈥 y 鈥渄ibujo鈥. Espero que les haya sido util.

lo tengo todo igual y no se que pasa, no se por que no se ejecuta el codigo. 驴podrian ayudarme? gracias.

var d = document.getElementById (鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

dibujarLinea(鈥減ink鈥, 10, 300, 220, 10);
dibujarLinea(鈥測ellow鈥, 300, 10, 10, 220);

function dibujarLinea(color, xinicial, yinicial, xinicial, yinicial)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(x_inicial, y_inicial);
lienzo.lineTo(x_inicial, y_inicial);
lienzo.stroke();
lienzo.closePath();

}

me encontre un problema pero no hayo el error por que el codigo esta bien tomando en cuenta may煤sculas y min煤sculas puntos y comas pero al terminar la funci贸n dibujar linea no me aparece la linea en el navegador![](

Hice uno sencillo, m谩s que nada para jugar con los arcos y c铆rculos, junto con las funciones

var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);

dibujar_arco(鈥渂lue鈥,30, 200,300,100,0,300);
dibujar_linea(鈥渂lue鈥,30, 200,300, 314, 300);
dibujar_circulo(鈥渞ed鈥, 30, 410,330,70);
dibujar_circulo(鈥測ellow鈥, 30, 590,330,70);
dibujar_circulo(鈥渂lue鈥, 30, 770,330,70);
dibujar_linea(鈥渂lue鈥,30, 840, 250,840,420);
dibujar_arco(鈥渂lue鈥,30, 770,420,70,0,150);
dibujar_linea(鈥済reen鈥,30,880,418,880,160);
dibujar_arco(鈥渞ed鈥,30,990,330,70,30,340);
dibujar_linea(鈥渞ed鈥,30,925,370,1058,290);

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

}

function dibujar_circulo(contorno,grosor_linea,xinicial,yinicial,diametro)
{
lienzo.beginPath();
lienzo.strokeStyle = contorno;
lienzo.lineWidth=grosor_linea;
lienzo.arc(xinicial,yinicial,diametro,0,Math.PI*2,true);
lienzo.stroke();
lienzo.closePath();
//lienzo.fill();

}

function dibujar_arco(color, grosor_linea, xinicial, yinicial, radio, partida, final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.lineWidth=grosor_linea;
lienzo.arc(xinicial,yinicial,radio,Math.PI/180partida,Math.PI/180final,false);
lienzo.stroke();
lienzo.closePath();

}

Como se escribe comentarios en el codigo de java script???

  1. Funciones en Javascript, son formas de escribir c贸digos.
  2. Cuando escribir una funci贸n? Cuando el c贸digo es igual o similar y requiere que se escriba varias veces y se necesita que cambien el valor de las variables.
  3. Para declarar una funci贸n se utiliza; funci贸n 鈥 nombre del dibujo鈥 (Variables separadas por comas)
    {

}
4. C贸mo traer el c贸digo del dibujo? Escribir en el bloque de c贸digo las variables detalladas con sus respectivas etiquetas.
5. D贸nde escribir el c贸digo? Puede ser en cualquier parte del archivo .js pues no var铆a en nada el trabajo.
6. Para que se ejecute la funci贸n,se escribe dibujar 鈥 nombre del dibujo鈥(se escribe el valor de cada variable siguiendo el orden descrito en el bloque de c贸digo).

Interesante usar funciones, esto reduce bastante c贸digo

En Javascript se leen primero las funciones y posteriormente las lineas que esta afuera de estas

Aqu铆 les dejo la manera en que yo dibujar铆a un cuadrado:

function dibujarCuadrado(papel, color, xInicial, yInicial, longth) {
    papel.beginPath();
    papel.strokeStyle = color;
    papel.moveTo(xInicial, yInicial);
    papel.lineTo(xInicial + longth, yInicial);
    papel.lineTo(xInicial + longth, yInicial + longth);
    papel.lineTo(xInicial, yInicial + longth);
    papel.lineTo(xInicial,yInicial);
    papel.stroke();
    papel.closePath();
}

Para que no modifiquen el contexto de su c贸digo en papel manden la variable que lo contenga.
Ejemplo:

d = document.getElementById("su id del canvas");
let lienzo = d.getContext("2d");

dibujarCuadrado(lienzo ,"red",1,1,50);

Tambi茅n quisiera saber como es que ustedes dibujar铆an un cuadrado utilizando una funci贸n.
Buen d铆a 馃槂.

const content = document.getElementById("_draw");
var gesto = content.getContext("2d");

var colorIn, scale, orientation, colorSt;

function _Ask() {
  clearCanvas();
  colorIn = parseInt(
    prompt(
      "驴De que color quieres la curva?\n 1=Rojo\n 2=Verde\n 3=Azul\n 4=Negro"
    )
  );
  scale = prompt("Indique la escala que utilizara (ej. 20):");
  orientation = parseInt(
    prompt(
      "驴Que orientaci贸n quieres para tu curva?\n 1=Izquierda, superior\n 2=Izquierda, inferior\n 3=Derecha, superior\n 4=Derecha,inferior\n 5=Todas las anteriores."
    )
  );
  switch (colorIn) {
    case 1:
      colorSt = "Red";
      break;
    case 2:
      colorSt = "green";
      break;
    case 3:
      colorSt = "blue";
      break;
    case 4:
      colorSt = "black";
      break;
    default:
      colorSt = "black";
      break;
  }
  _drawAll();
}
_Ask();

function clearCanvas() {
  gesto.clearRect(0, 0, content.width, content.height);
}

function _draWithCanvas(
  _colorLine,
  _beginPointX,
  _beginPointY,
  _endPointX,
  _endPointY
) {
  gesto.beginPath();
  gesto.strokeStyle = _colorLine;
  gesto.moveTo(_beginPointX, _beginPointY);
  gesto.lineTo(_endPointX, _endPointY);
  gesto.stroke();
  gesto.closePath();
}



function _drawAll() {
  for (let index = 0; index <= 300 / scale; index++) {
    switch (orientation) {
      case 1:
        //izquierda superior
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        break;
      case 2:
        //izquierda inferior
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        break;
      case 3:
        //derecha superior
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        break;
      case 4:
        //derecha inferior
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
      default:
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
    }
  }
}

function _Mirror() {
  clearCanvas();
  for (let index = 0; index <= 300 / scale; index++) {
    switch (orientation) {
      case 1:
        //izquierda inferior
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        break;
      case 2:
        //izquierda superior
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);

        break;
      case 3:
        //derecha inferior
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);

        break;
      case 4:
        //derecha superior
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);

        break;
      default:
        _draWithCanvas(colorSt, 300 - index * scale, 0, 0, index * scale);
        _draWithCanvas(colorSt, 0, index * scale, index * scale, 300);
        _draWithCanvas(colorSt, 300, index * scale, index * scale, 0);
        _draWithCanvas(colorSt, 300, index * scale, 300 - index * scale, 300);
        break;
    }
  }
  switch (orientation) {
    case 1:
      //izquierda inferior
      orientation = 2;
      break;
    case 2:
      //izquierda superior
      orientation = 1;
      break;
    case 3:
      //derecha inferior
      orientation = 4;
      break;
    case 4:
      //derecha superior
      orientation = 3;
      break;
    default:
      orientation = 5;
      break;
  }
}

![](

Resultado de mi practica usando Canvas =)

Una familia de tri谩ngulos son鈥
.