top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

CANVAS - 

Dibujo creado en HTML5 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here

//BEZIER CURVE
//--------
//colita//
//--------
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(228,388, 226,438, 190,440);
context.bezierCurveTo(190,440, 155,439, 154,388);
context.bezierCurveTo(154,368, 190,370, 228,388);
context.bezierCurveTo();
context.stroke();
context.fill();
context.closePath();


//--------
//tronco//
//--------
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "orange";
context.bezierCurveTo(46,364, 46,380, 46,392);
context.bezierCurveTo(46,392, 110,393, 154,388);
context.bezierCurveTo(154,388, 190,384, 228,388);
context.bezierCurveTo(228,388, 250,390, 268,396);
context.bezierCurveTo(268,396, 300,403, 330,406);
context.bezierCurveTo(330,406, 332, 390, 330,370);

context.bezierCurveTo(330,370, 300,364, 278,360);
context.bezierCurveTo(278,360, 190,340, 108,360);
context.bezierCurveTo(108,360, 80,360, 46,364);
context.stroke();
context.fill();
context.closePath();

 


//----------------------
//CUERPO 
//----------------------
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
//1-2-3-4-5
context.bezierCurveTo(166,96, 192,86, 224,94);
context.bezierCurveTo (224,94, 225,90, 224,85);
//5-6-7-8   /   8-9-10
context.bezierCurveTo(224,85, 224,51, 244,38);
context.bezierCurveTo(244,38, 266,60, 246,90);

context.bezierCurveTo(246,90, 242,96, 238,100);

//-------------
//brazo derecho
//(16-17-18) //18-19-20
context.bezierCurveTo(238,102, 252,108, 260,134);
context.bezierCurveTo(260,134, 270,140, 268,150)
// 20 - 23 con los nuevos puntos
context.bezierCurveTo(268,150, 344,234, 300,310);
//23-24
context.bezierCurveTo(300,310, 296,312, 292,314);
// aqui va hasta el 28
context.bezierCurveTo(292,314, 292,330, 280,344);
//28-29-30
context.bezierCurveTo(280,344, 273,374, 250,386);
context.bezierCurveTo(250,386, 226, 392, 218, 366);
//curva arriba de la cola
context.bezierCurveTo(218, 366, 198,356, 164,370);
//patica izquierda
context.bezierCurveTo(164,370, 162,402, 136,386);
context.bezierCurveTo(136,386, 117,376, 108,360);
context.bezierCurveTo(108,360, 90,348, 86,314);
//brazo izquierdo - abarca del 45 al 52
context.bezierCurveTo(86,314, 0, 254, 109,162);
context.bezierCurveTo(109,162, 111,122, 145,106);

//54-56-57
context.bezierCurveTo(145,106, 146,100, 140,97);
context.bezierCurveTo(140,97, 128,60, 150,40);
context.bezierCurveTo(150,40, 172,46, 168,86);
context.bezierCurveTo(168,86, 164,90, 166,96);

context.stroke();
context.fill();
context.closePath();



//---------------------
//bigotes
//---------------------


//b1-b2
//context.strokeStyle = "black";
//context.arc(84,132, 300, 132,140,true );
//context.stroke();


//b3-b4
//context.bezierCurveTo(66,142, 96,145, 125,150);

//b5-b6
//context.bezierCurveTo(70,164, 92,159, 116,158);

//b7-b8
//context.bezierCurveTo(252,138, 270,132, 290,126);

//b9-b10
//context.bezierCurveTo(256,144, 280, 142, 306, 142);

//b11-b12
//context.bezierCurveTo(258,150, 282, 152, 302, 156);

// FIN BIGOTES------------
//------------------------

 

 

//-----------------
//NARIZ-----------
//---------------

 

//LINEAS DE EXPRESION

//LINEA 1   //LINEA 2   //LINEA 3
//context.strokeStyle = "black";
///context.arc(179,131, 184,126, 188,124);
//context.stroke(2);
//context.arc(188,128, 198,125, 208,126);
//context.stroke(2);
//context.arc(204,128, 208,129, 210,130);
//context.stroke(2);


//------------------
//-----BOCA---------
//------------------
context.beginPath();
context.strokeStyle = "black";
context.moveTo (192,167);
context.lineTo(200,165);
context.stroke();
context.closePath();
//------------------
//-----BOCA---------
//------------------


//--------------
//TOTORO PARTE BLANCA
//------------------

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "white";

//empieza en el punto 28
context.bezierCurveTo(280,344, 304,306, 284,240);
context.bezierCurveTo(284,240, 264,180, 196,178);
context.bezierCurveTo(196,178, 126,172, 102,240);
context.bezierCurveTo(102,240, 72, 338, 108,360);
context.bezierCurveTo(108,360, 93,326, 114,312);
context.bezierCurveTo(114,312, 136,302, 158,330);
context.bezierCurveTo(158,330, 170,348, 164,370);
context.bezierCurveTo(164,370, 198,356, 218,366);

context.bezierCurveTo(218,366, 220,340, 232,326);
context.bezierCurveTo(232,326, 248,306, 272,310);
context.bezierCurveTo(272,310, 286,320, 280,344);

context.stroke();
context.fill();
context.closePath();


//rayitas del pecho

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(150,236, 166,222, 182,236);
context.bezierCurveTo(182,236, 168,212, 150,236);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(196,232, 212,218, 226,230);
context.bezierCurveTo(226,230, 212,204, 196,232);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(244,236, 258,224, 271,242);
context.bezierCurveTo(271,242, 266,210, 244,236);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(108,248, 120,218, 134,239);
context.bezierCurveTo(134,239, 122,230, 108,248);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(120,218, 140,202, 154,212);
context.bezierCurveTo(154,212, 140,190, 120,218);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(172,208, 192,192, 206,206);
context.bezierCurveTo(206,206, 193,178, 172,208);
context.stroke();
context.fill();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(224,209, 246,187, 255,216);
context.bezierCurveTo(255,216, 243,196, 224,209);
context.stroke();
context.fill();
context.closePath();


//--------------
//-ojos
//--------------


context.beginPath();
      context.arc(234, 130, 9, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'black';
      context.stroke();
      context.closePath();
     
     
      //pupila ojo derecha
      context.beginPath();
      context.arc(233, 129, 4, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'black';
      context.stroke();
      context.closePath();
     
     
     
context.closePath();
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "white";
context.bezierCurveTo(141,130, 142,120, 152,120);
context.bezierCurveTo(152,120, 165,120, 166,130);
context.bezierCurveTo(166,130, 166,140, 152,140);
context.bezierCurveTo(152,140, 142,140, 141,130);

context.stroke();
context.fill();
context.closePath();


//pupila ojo izquierda
      context.beginPath();
      context.arc(155, 130, 4, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'black';
      context.stroke();
      context.closePath();


//brillo ojo izquierdo
      context.beginPath();
      context.arc(153, 128, 1, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'white';
      context.stroke();
      context.closePath();

//brillo ojo derecho
      context.beginPath();
      context.arc(230, 128, 1, 0, 2 * Math.PI, false);
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 0;
      context.strokeStyle = 'white';
      context.stroke();
      context.closePath();

 


//------------------
//-----NARIZ--------
//------------------

context.beginPath();
context.strokeStyle = "black";
context.moveTo(179,131);
context.lineTo(188,124);
context.stroke();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.moveTo(188,128);
context.lineTo(208,126);
context.stroke();
context.closePath();

context.beginPath();
context.strokeStyle = "black";
context.moveTo(204,128);
context.lineTo(210,130);
context.stroke();
context.closePath();


 
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "black";
context.bezierCurveTo(188,133, 190,131, 196,130);
context.bezierCurveTo(196,130, 205,130, 206,132);
context.bezierCurveTo(206,132, 204,134, 197,136);
context.bezierCurveTo(197,136, 191,136, 188,133);
context.stroke();
context.fill();
context.closePath();

 

 

//---------------------
//bigotes
//---------------------


//b1-b2
//(84,132, 108,134, 132,140);
context.beginPath();
context.strokeStyle = "black";
context.moveTo(84,132);
context.lineTo(132,140);
context.stroke();
context.closePath();

//b3-b4
context.beginPath();
context.strokeStyle = "black";
context.moveTo(66,142);
context.lineTo(125,150);
context.stroke();
context.closePath();

//b5-b6
context.beginPath();
context.strokeStyle = "black";
context.moveTo(70,164);
context.lineTo(116,158);
context.stroke();
context.closePath();
//(70,164, 92,159, 116,158); 

//b7-b8
context.beginPath();
context.strokeStyle = "black";
context.moveTo(252,138);
context.lineTo(290,126);
context.stroke();
context.closePath();
//(252,138, 270,132, 290,126);

 

//b9-b10
context.beginPath();
context.strokeStyle = "black";
context.moveTo(256,144);
context.lineTo(306,142);
context.stroke();
context.closePath();
//(256,144, 280, 142, 306, 142);

 

//b11-b12
context.beginPath();
context.strokeStyle = "black";
context.moveTo(258,150);
context.lineTo(302,156);
context.stroke();
context.closePath();
//(258,150, 282, 152, 302, 156);

 

// FIN BIGOTES------------

//------------------------

 

 

 

//---------------
//----right armour
//---------------

 

//area grande externa
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(224,358, 230,344, 250,352);
context.bezierCurveTo(250,352, 270,360, 255,376);
context.bezierCurveTo(255,376, 243,392, 232,382);
context.bezierCurveTo(232,382, 218,375, 224,358);
context.stroke();
context.fill();
context.closePath();
 
//area blanca pequeña
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "white";
context.bezierCurveTo(228,372, 244,366, 244,378);
context.bezierCurveTo(244,378, 228,386, 228,372);
context.stroke();
context.fill();
context.closePath();
 
 
 
 
 
 

//claws
context.beginPath();
context.strokeStyle = "white";
context.moveTo(231,356);
context.lineTo(234,340);
context.stroke();
context.closePath();
 

 
context.beginPath();
context.strokeStyle = "white";
context.moveTo(243,354);
context.lineTo(250,340);
context.stroke();
context.closePath();
 

 
context.beginPath();
context.strokeStyle = "white";
context.moveTo(252,360);
context.lineTo(261,348);
context.stroke();
context.closePath();
 

//fin fight armour
//-----------------

 

  

//----------------
//----left armour
//----------------

 

//area grande externa
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "grey";
context.bezierCurveTo(134,350, 148,337, 158,354);
context.bezierCurveTo(158,354, 168,376, 154,382);
context.bezierCurveTo(154,382, 139,390, 128,374);
context.bezierCurveTo(128,374, 118,352, 134,350);
context.stroke();
context.fill();
context.closePath();
 

//area blanca pequeña
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "white";
context.bezierCurveTo(146,380, 146,362, 158,368);
context.bezierCurveTo(158,368, 159,386, 146,380);
context.stroke();
context.fill();
context.closePath();
 

//claws
context.beginPath();
context.strokeStyle = "white";
context.moveTo(129,359);
context.lineTo(122,346);
context.stroke();
context.closePath();


context.beginPath();
context.strokeStyle = "white";
context.moveTo(139,353);
context.lineTo(132,336);
context.stroke();
context.closePath();


context.beginPath();
context.strokeStyle = "white";
context.moveTo(148,352);
context.lineTo(148,337);
context.stroke();
context.closePath();

 

context.stroke();
context.fill();

 

 

 

 

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>
</html>

bottom of page