Volver al artículo

Ver/Ocultar código fuente

function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
       var ctx = canvas.getContext('2d');
	  //degradados
	  var contsupder = ctx.createLinearGradient(370,160,470,230);
	  contsupder.addColorStop(0,'#0F80BC');
	  contsupder.addColorStop(1,'#000C36');
	  var contsupizq = ctx.createLinearGradient(390,50,210,120);
	  contsupizq.addColorStop(0,'#0F80BC');
	  contsupizq.addColorStop(1,'#053A74');
	  var contgrande = ctx.createLinearGradient(390,160,550,370);
	  contgrande.addColorStop(0,'#084F85');
	  contgrande.addColorStop(1,'#00032E');
	  var minicontdergrande = ctx.createLinearGradient(530,200,571,200);
	  minicontdergrande.addColorStop(0,'#011F64');
	  minicontdergrande.addColorStop(1,'#001149');
	  var contizqgrande = ctx.createLinearGradient(330,354,348,373);
	  contizqgrande.addColorStop(0,'#000721');
	  contizqgrande.addColorStop(1,'#001250');
	  var mar = ctx.createLinearGradient(210,50,210,390);
	  mar.addColorStop(0,'#67C5D5');
	  mar.addColorStop(0.5,'#5BA5C4');
	  mar.addColorStop(1,'#211375');	
	  var cristal = ctx.createLinearGradient(390,60,390,180);
	  cristal.addColorStop(0,'rgba(255,255,255,0.6)');
	  cristal.addColorStop(0.6,'rgba(255,255,255,0.3)');
	  cristal.addColorStop(0.95,'rgba(255,255,255,0)');
	  var cachetepeludo = ctx.createLinearGradient(250,260,300,380);
	  cachetepeludo.addColorStop(0,'rgba(150,18,3,1)');
	  cachetepeludo.addColorStop(0.5,'rgba(193,49,1,1)');
	  cachetepeludo.addColorStop(1,'rgba(228,95,7,0)');
	  var hocicobase = ctx.createLinearGradient(315,0,380,0);
	  hocicobase.addColorStop(0,'rgba(173,39,5,1)');
	  hocicobase.addColorStop(0.4,'rgba(237,85,2,1)');
	  hocicobase.addColorStop(1,'rgba(237,85,2,1)');
	  var blancohocico = ctx.createLinearGradient(320,220,340,210);
	  blancohocico.addColorStop(0,'rgba(242,199,171,1)');
	  blancohocico.addColorStop(1,'rgba(255,255,204,1)');
	  var sombrahocico = ctx.createLinearGradient(335,0,380,0);
	  sombrahocico.addColorStop(0,'rgba(0,0,0,0.1)');
	  sombrahocico.addColorStop(1,'rgba(0,0,0,0.01)');
	  var puntahocico = ctx.createLinearGradient(367,181.5,381,196);
	  puntahocico.addColorStop(0,'rgba(133,142,141,1)');
	  puntahocico.addColorStop(0.3,'rgba(133,142,141,1)');
	  puntahocico.addColorStop(1,'rgba(0,0,0,1)');
	  var sombra_blanca_pata = ctx.createLinearGradient(440,340,380,310);
	  sombra_blanca_pata.addColorStop(0,'rgba(243,248,155,1)');
	  sombra_blanca_pata.addColorStop(1,'rgba(243,248,155,0)');
	  var sombra_pata = ctx.createLinearGradient(420,335,300,380);
	  sombra_pata.addColorStop(0,'rgba(142,15,1,0.3)');
	  sombra_pata.addColorStop(1,'rgba(142,15,1,1)');
	  //degradados amarillos de la cola
	  var deg_cola_1 = ctx.createLinearGradient(445,85,555,140);
	  deg_cola_1.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_1.addColorStop(0.5,'rgba(254,254,37,1)');
	  deg_cola_1.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_2 = ctx.createLinearGradient(445,85,600,200);
	  deg_cola_2.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_2.addColorStop(0.5,'rgba(254,254,37,1)');
	  deg_cola_2.addColorStop(1,'rgba(247,151,8,1)');
	  var deg_cola_3 = ctx.createLinearGradient(445,85,600,210);
	  deg_cola_3.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_3.addColorStop(0.5,'rgba(254,254,37,1)');
	  deg_cola_3.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_4 = ctx.createLinearGradient(598,130,590,265);
	  deg_cola_4.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_4.addColorStop(0.5,'rgba(254,254,37,1)');
	  deg_cola_4.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_5 = ctx.createLinearGradient(580,200,590,370);
	  deg_cola_5.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_5.addColorStop(0.3,'rgba(254,254,37,1)');
	  deg_cola_5.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_6 = ctx.createLinearGradient(580,200,590,310);
	  deg_cola_6.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_6.addColorStop(0.3,'rgba(254,254,37,1)');
	  deg_cola_6.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_7 = ctx.createLinearGradient(640,240,590,500);
	  deg_cola_7.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_7.addColorStop(0.3,'rgba(254,254,37,1)');
	  deg_cola_7.addColorStop(1,'rgba(254,249,149,0)');
	  var deg_cola_8 = ctx.createLinearGradient(640,240,590,500);
	  deg_cola_8.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_8.addColorStop(0.3,'rgba(254,254,37,1)');
	  deg_cola_8.addColorStop(1,'rgba(222,92,1,0.9)');
	  var deg_cola_9 = ctx.createLinearGradient(580,320,350,480);
	  deg_cola_9.addColorStop(0,'rgba(254,249,149,1)');
	  deg_cola_9.addColorStop(0.3,'rgba(254,254,37,1)');
	  deg_cola_9.addColorStop(1,'rgba(185,18,13,0.9)');
	  var deg_oreja_izq = ctx.createLinearGradient(190,120,220,180);
	  deg_oreja_izq.addColorStop(0,'rgba(249,189,95,1)');
	  deg_oreja_izq.addColorStop(0.2,'rgba(245,167,75,1)');
	  deg_oreja_izq.addColorStop(0.7,'rgba(174,42,5,1)');
	  deg_oreja_izq.addColorStop(1,'rgba(174,42,5,1)');
	  var deg_cabeza = ctx.createLinearGradient(200,125,200,159);
	  deg_cabeza.addColorStop(0,'rgba(255,255,255,0.8)');
	  deg_cabeza.addColorStop(1,'rgba(255,255,255,0)');
	  var deg_oreja_der = ctx.createLinearGradient(350,110,290,160);
	  deg_oreja_der.addColorStop(0,'rgba(254,242,190,1)');
	  deg_oreja_der.addColorStop(0.25,'rgba(244,176,82,1)');
	  deg_oreja_der.addColorStop(1,'rgba(222,114,16,1)');
	  var deg_rojo_lomo = ctx.createLinearGradient(150,260,380,500);
	  deg_rojo_lomo.addColorStop(0,'rgba(179,0,0,1)');
	  deg_rojo_lomo.addColorStop(0.9,'rgba(186,19,4,1)');
	  deg_rojo_lomo.addColorStop(1,'rgba(186,19,4,0.2)');
	  var deg_lomo_1 = ctx.createLinearGradient(460,440,170,330);
	  deg_lomo_1.addColorStop(0,'rgba(255,255,255,0.2)');
	  deg_lomo_1.addColorStop(0.3,'rgba(222,114,16,1)');
	  deg_lomo_1.addColorStop(1,'rgba(222,114,16,1)');
	  var deg_lomo_2 = ctx.createLinearGradient(460,440,170,330);
	  deg_lomo_2.addColorStop(0,'rgba(255,255,255,0.2)');
	  deg_lomo_2.addColorStop(0.3,'rgba(222,114,16,1)');
	  deg_lomo_2.addColorStop(1,'rgba(222,114,16,1)');
	  var deg_lomo_3 = ctx.createLinearGradient(340,440,170,330);
	  deg_lomo_3.addColorStop(0,'rgba(232,210,100,0.4)');
	  deg_lomo_3.addColorStop(0.5,'rgba(222,114,16,1)');
	  deg_lomo_3.addColorStop(1,'rgba(222,114,16,1)');
	  var deg_lomo_4 = ctx.createLinearGradient(340,440,170,330);
	  deg_lomo_4.addColorStop(0,'rgba(255,255,255,0.3)');
	  deg_lomo_4.addColorStop(0.5,'rgba(222,114,16,0.6)');
	  deg_lomo_4.addColorStop(1,'rgba(222,114,16,0)');
	  var deg_lomo_picos_blancos = ctx.createLinearGradient(263,145,190,190);
	  deg_lomo_picos_blancos.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos.addColorStop(0.5,'rgba(255,255,255,0.3)');
	  deg_lomo_picos_blancos.addColorStop(1,'rgba(255,255,255,0)');
	  var deg_lomo_picos_blancos_1 = ctx.createLinearGradient(175,180,175,210);
	  deg_lomo_picos_blancos_1.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_1.addColorStop(1,'rgba(255,255,255,0.3)');
	  var deg_lomo_picos_blancos_2 = ctx.createLinearGradient(160,200,160,240);
	  deg_lomo_picos_blancos_2.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_2.addColorStop(1,'rgba(255,255,255,0.3)');
	  var deg_lomo_picos_blancos_3 = ctx.createLinearGradient(160,240,160,320);
	  deg_lomo_picos_blancos_3.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_3.addColorStop(0.5,'rgba(255,255,255,0.3)');
	  deg_lomo_picos_blancos_3.addColorStop(1,'rgba(255,255,255,0.3)');
	  var deg_lomo_picos_blancos_4 = ctx.createLinearGradient(160,230,160,255);
	  deg_lomo_picos_blancos_4.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_4.addColorStop(1,'rgba(255,255,255,0.3)');
	  var deg_lomo_picos_blancos_5 = ctx.createLinearGradient(190,245,190,275);
	  deg_lomo_picos_blancos_5.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_5.addColorStop(1,'rgba(255,255,255,0.3)');
	  var deg_lomo_picos_blancos_6 = ctx.createLinearGradient(180,280,180,320);
	  deg_lomo_picos_blancos_6.addColorStop(0,'rgba(255,255,255,0)');
	  deg_lomo_picos_blancos_6.addColorStop(1,'rgba(255,255,255,0.3)');
	  //circulo grande
	  //ctx.beginPath();
	  ctx.fillStyle = "rgba(0, 0, 100, 1)";/*0.1*/
	  ctx.arc(390,278,232,0,Math.PI*2,true);
	  ctx.fill();
	  //2 circulo grande
	  ctx.beginPath();
	  ctx.fillStyle = mar;/*0.1*/
	  ctx.arc(390,278,228,0,Math.PI*2,true);
	  ctx.fill();
	  //continentes
	  ctx.beginPath();
	  ctx.fillStyle = "rgba(50, 130, 600, 1)";/*0.3*/
	  //continente superior izquierdo
	  ctx.beginPath();
	  ctx.fillStyle = contsupizq;
	  ctx.moveTo(390,50);
	        ctx.lineTo(370,59.5);
	        ctx.lineTo(358,80);
	        ctx.bezierCurveTo(356,82,361,89,366,85);
	        ctx.bezierCurveTo(359,99,368,102,356,120);
	        ctx.lineTo(348,137);
	        ctx.bezierCurveTo(347,138,340,128,340,138);
	        ctx.bezierCurveTo(334,140,332,138,327,134);
	        ctx.lineTo(280,150);
	        ctx.lineTo(220,150);
	        ctx.lineTo(216,130);
	        ctx.bezierCurveTo(260,82,310,53,390,50);
	  ctx.fill();
	        //continente superior derecho
	  ctx.beginPath();
	  ctx.fillStyle = contsupder;/*0.3*/
	        ctx.moveTo(394,50);
	        ctx.quadraticCurveTo(391,55,397,65);
	        ctx.quadraticCurveTo(395,72,398,74);
	        ctx.quadraticCurveTo(420,82,418.5,89);
	        ctx.quadraticCurveTo(419,92,414,92);
	        ctx.quadraticCurveTo(409,89,411,95);
	        ctx.quadraticCurveTo(422,100,411,100);
	  ctx.lineTo(420,107);
	  ctx.lineTo(417,112);
	  ctx.bezierCurveTo(400,115,449,124,412,124);
	        ctx.lineTo(409.5,127.5);
	        ctx.lineTo(416,135);
	        ctx.lineTo(422,140);
	        ctx.lineTo(437,135);
	        ctx.lineTo(449,128.8);
	        ctx.bezierCurveTo(452,130,447,124,455,125);
	        ctx.lineTo(461,127);
	        ctx.lineTo(477,135.5);
	        ctx.lineTo(479,138.5);
	        ctx.quadraticCurveTo(472,140,479,155);
	        ctx.lineTo(483,157);
	        ctx.quadraticCurveTo(482.5,153,487,154);
	        ctx.bezierCurveTo(492,154,485,162,489,160);
	        ctx.quadraticCurveTo(488,165,498,166);
	        ctx.quadraticCurveTo(498,169,502,169);
	        ctx.quadraticCurveTo(503,171,506,174);
	        ctx.quadraticCurveTo(506.5,186,508,172);
	        ctx.bezierCurveTo(515,172,513,165,514,161);
	        ctx.quadraticCurveTo(520,154,518,163);
	        ctx.bezierCurveTo(526,168,536.5,169,540,160);
	        ctx.lineTo(560,140);
	        ctx.lineTo(531,99);
	        ctx.bezierCurveTo(487,66,449,53,394,50);
	  ctx.fill();
	        //isla entre continentes derecho e izquierdo
	        ctx.moveTo(401,120);
	        ctx.quadraticCurveTo(408,128,404,133);
	        ctx.quadraticCurveTo(413,138,408,140.5);
	        ctx.quadraticCurveTo(410,155,388,154);
	        ctx.quadraticCurveTo(396,148,390,143);
	        ctx.quadraticCurveTo(378,155,375,140);
	        ctx.quadraticCurveTo(386,132,389,134);
	        ctx.quadraticCurveTo(387,129,396,130);
	        ctx.quadraticCurveTo(395,125,401,120);
	  ctx.fill();
	        //continente grande del centro
	  ctx.beginPath();
	  ctx.fillStyle = contgrande;
	        ctx.moveTo(452,405);
	        ctx.quadraticCurveTo(443,395,427,397);
	        ctx.quadraticCurveTo(413,392,432,390.5);
	        ctx.lineTo(420,384);
	        ctx.lineTo(412,385);
	        ctx.quadraticCurveTo(405,383,407,381);
	  ctx.quadraticCurveTo(385,384,401,378);
	  ctx.quadraticCurveTo(401,374,405,372);
	  ctx.quadraticCurveTo(402,365,411,360);
	  ctx.quadraticCurveTo(407,355,410,350);
	  ctx.lineTo(431,318);
	  ctx.quadraticCurveTo(440,319,446,320);
	  ctx.quadraticCurveTo(446,312,460,314);
	        ctx.lineTo(460,319);
	  ctx.quadraticCurveTo(449,313,449,303);
	  ctx.quadraticCurveTo(443,305,452,292);
	  ctx.quadraticCurveTo(448,287,445,293);
	  ctx.bezierCurveTo(436,296,430,274,447,260);
	  ctx.lineTo(446.3,257);
	  ctx.bezierCurveTo(430,266,408,235,419,227);
	        ctx.bezierCurveTo(407,221,411,198,440,214);
	        ctx.lineTo(440,220);
	        ctx.lineTo(446,216);
	        ctx.lineTo(452,223);
	        ctx.lineTo(456,223);
	  ctx.bezierCurveTo(465,215,445,200,459,193);
	  ctx.bezierCurveTo(471,206,471,188,482,200);
	  ctx.bezierCurveTo(493,208,496,215,492,217);
	  ctx.bezierCurveTo(497,217,496,226,491,226);
	  ctx.quadraticCurveTo(486,230,492,232);
	  ctx.quadraticCurveTo(498,228,504,233);
	  ctx.quadraticCurveTo(503,240,498,238);
	  ctx.quadraticCurveTo(498,234,495,237);
	  ctx.bezierCurveTo(498,250,506,247,501,255);
	  ctx.quadraticCurveTo(508,257,509,261);
	  ctx.quadraticCurveTo(514,265,520,258);
	  ctx.quadraticCurveTo(546,245,524,264);
	  ctx.bezierCurveTo(530,261,550,244,534,267);
	  ctx.quadraticCurveTo(539,276,530,287);
	  ctx.quadraticCurveTo(530,296,521,300);
	  ctx.quadraticCurveTo(520,295,512,300);
	  ctx.bezierCurveTo(523,305,524,312,515,323);
	  ctx.quadraticCurveTo(517,339,509,337);
	  ctx.quadraticCurveTo(511,347,500,343);
	  ctx.quadraticCurveTo(493,340,498,348);
	  ctx.quadraticCurveTo(504,354,500,360);
	  ctx.quadraticCurveTo(492,362,495,352);
	  ctx.bezierCurveTo(476,365,493,367,479,370);
	  ctx.quadraticCurveTo(485,365,480,380);
	        ctx.lineTo(481,387);
	  ctx.fill();
	        //isla a la derecha del continente grande
	  ctx.beginPath();
	  ctx.fillStyle = minicontdergrande;
	  ctx.moveTo(560,222);
	  ctx.bezierCurveTo(556,220,554,226,548,222);
	  ctx.quadraticCurveTo(546,220,547,226);
	  ctx.quadraticCurveTo(544,225,546,227);
	  ctx.quadraticCurveTo(549.5,226,551,229);
	  ctx.quadraticCurveTo(545,226,542,233);
	  ctx.quadraticCurveTo(540,230,539,232);
	  ctx.lineTo(538,230);
	  ctx.quadraticCurveTo(528,232,533,238.5);
	  ctx.bezierCurveTo(540,234,541,240,536,242);
	  ctx.quadraticCurveTo(546,247,547,240);
	  ctx.lineTo(546,236);
	  ctx.lineTo(548,234);
	  ctx.lineTo(548,232);
	  ctx.lineTo(554,232);
	  ctx.quadraticCurveTo(560,232,562,226);
	  ctx.fill();
	        //parte de abajo continente  izquierdo
	  ctx.beginPath();
	  ctx.fillStyle = contizqgrande;
	        ctx.moveTo(320,360);
	        ctx.lineTo(320,410);
	        ctx.lineTo(395,407);
	        ctx.quadraticCurveTo(388,404,390,395.5);
	        ctx.quadraticCurveTo(384,399,383,395);
	        ctx.quadraticCurveTo(392,385,381,380);
	        ctx.quadraticCurveTo(385,373,378,370);
	        ctx.lineTo(380,360);
	 	  ctx.fill();
	  //cristalizado
	  ctx.beginPath();
	  ctx.fillStyle = cristal;
	  ctx.moveTo(390,60);
	  ctx.bezierCurveTo(321.5,60,266,95,266,138);
	  ctx.bezierCurveTo(266,181,321.5,216,390,216);
	  ctx.bezierCurveTo(445.5,216,514,181,514,138);
	  ctx.bezierCurveTo(514,95,445.5,60,390,60);
	  ctx.fill();
	  	  //cola y lomo
	 	  ctx.fillStyle = "rgba(222, 115, 27, 1)";/*0.1*/
	 	  ctx.beginPath();
		  ctx.moveTo(445,87);
	  	  ctx.bezierCurveTo(530,85,572,108,600,165);
	  	  ctx.bezierCurveTo(596,135,593,132,590,124);
	  	  ctx.bezierCurveTo(620,155,626,195,632,255);
	  	  ctx.bezierCurveTo(635,225,635,225,637,220);
	  	  ctx.bezierCurveTo(645,465,495,520,400,525);
	  	  ctx.bezierCurveTo(235,528,168,420,150,310);
	  	  ctx.bezierCurveTo(148,317,148,317,147,331);
	  	  ctx.bezierCurveTo(145,290,145,280,155,243.5);
	  	  ctx.bezierCurveTo(150,250,150,250,143,269);
	  	  ctx.bezierCurveTo(152,222,153,210,175,180);
	  	  //oreja izquierda
	  	  ctx.bezierCurveTo(172,139,175,120,200,94);
	  	  ctx.bezierCurveTo(203,120,211,123,225,138);
	  	  //cabeza
	  	  ctx.bezierCurveTo(253,135,256,133,285,140);
	  	  //oreja derecha
	  	  ctx.bezierCurveTo(302,120,318,115,350,111);
	  	  ctx.bezierCurveTo(327,126,320,137,319.5,160);
	  	  //hocico
	  	  ctx.bezierCurveTo(324,171,324,176,339,181);
	  	  ctx.bezierCurveTo(350,180,350,180,378,181.7);
	  	  //punta del hocico
	  	  ctx.bezierCurveTo(383,181,384,182,384,188);
	     	  ctx.bezierCurveTo(383,205,381,205,370,209);
	  	  //parte de abajo del hocico
	  	  ctx.bezierCurveTo(352,219,352,219,335,237);
	  	  ctx.bezierCurveTo(341,250,341,250,340,270);
	  	  ctx.bezierCurveTo(330,265,330,265,318,262);
	  	  ctx.bezierCurveTo(300,270,302,265,300,291);
	  	  //pata
	  	  ctx.bezierCurveTo(310,315,328,325,360,324);
	  	  ctx.bezierCurveTo(362,326,380,317,390,313);
	  	  ctx.bezierCurveTo(418,311,424,309,443,328);
	  	  ctx.bezierCurveTo(445,334,446,338,437,340);
	  	  ctx.bezierCurveTo(412,336,396,380,328,373);
	  	  //cola interior
	  	  ctx.bezierCurveTo(395,426,468,420,518,340);
	  	  ctx.bezierCurveTo(515,360,514,362,510,381);
	  	  ctx.bezierCurveTo(533,360,542,316,533.5,275);
	  	  ctx.bezierCurveTo(542,278,545,278,552,292);
	  	  ctx.bezierCurveTo(564,250,564,250,553,198);
	  	  ctx.bezierCurveTo(566,206,566,204,576.5,220.5);
	  	  ctx.bezierCurveTo(558,162,530,138,467,120);
	  	  ctx.bezierCurveTo(480,112,497,110,515,111);
	  	  ctx.bezierCurveTo(491,93,482,92,445,87);
	  	  ctx.fill();



	  //capas degradadas del zorro
	  ctx.beginPath();
	  ctx.fillStyle = hocicobase;
	  ctx.moveTo(318,160);
	  ctx.bezierCurveTo(324,171,324,176,339,181);//hocico base
	  	  ctx.bezierCurveTo(350,180,350,180,378,181.7);
	  	  ctx.bezierCurveTo(383,181,384,182,384,188);
	     	  ctx.bezierCurveTo(383,205,381,205,370,211);
	  	  ctx.bezierCurveTo(360,219,352,219,335,237);
	  ctx.lineTo(300,240);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = sombrahocico;
	  ctx.moveTo(336,184);
	  ctx.quadraticCurveTo(350,190,369,184);//sombra oscura hocico
	  ctx.quadraticCurveTo(377,189,379,195);
	  ctx.lineTo(380,200);
	  ctx.lineTo(340,220);
	  ctx.lineTo(338,208);
	  ctx.quadraticCurveTo(347,200,336,184);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = blancohocico;
	  ctx.moveTo(381,193);
	  ctx.bezierCurveTo(350,230,353,192,320,215);//parte blanca hocico
	  ctx.lineTo(320,240);
	  ctx.lineTo(336,235);
	  ctx.bezierCurveTo(343,224,379,209,382,200);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = "rgba(238, 164, 114, 1)";
	  ctx.moveTo(327,226);
	  ctx.bezierCurveTo(343,211,359,228,381,196);//parte debajo de lo blanco hocico		  
	  ctx.lineTo(382,200);
	  ctx.bezierCurveTo(379,209,343,224,334,237);		  
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = puntahocico;
	  ctx.moveTo(381.5,200);
	  ctx.quadraticCurveTo(380.5,191,367,181.5);//punta hocico negro
	  ctx.bezierCurveTo(387,181,385,182,384,193);
	  ctx.quadraticCurveTo(383,196,381.5,200);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = "rgba(222, 115, 27, 1)";
	  ctx.moveTo(147,331);
	  ctx.bezierCurveTo(145,290,145,280,155,243.5);//cabeza lomo
	  	  ctx.bezierCurveTo(150,250,150,250,143,269);
	  	  ctx.bezierCurveTo(152,222,153,210,175,180);
	  ctx.bezierCurveTo(210,136,245,130,285,140);
	  ctx.bezierCurveTo(302,120,318,115,350.5,111.5);
	  	  ctx.bezierCurveTo(320,126,308,170,321,214);
	  ctx.bezierCurveTo(326,227,332,227,335,237);
	  ctx.bezierCurveTo(341,250,341,250,340,270);
	  ctx.bezierCurveTo(245,240,217,320,270,360);
	  ctx.bezierCurveTo(340,415,460,448,517,341);
	  ctx.bezierCurveTo(515,360,514,362,510,381);
	  ctx.bezierCurveTo(460,520,240,470,162,300);
	  ctx.quadraticCurveTo(161,280,164,264);
	  ctx.quadraticCurveTo(153,290,147,331);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = cachetepeludo;
	  ctx.moveTo(318,265);
	  ctx.bezierCurveTo(242,252,217,325,271,360);//debajo del cachete peludo
	  ctx.quadraticCurveTo(313,390,360,400);
	  ctx.bezierCurveTo(297,353,294,320,299,280);
	  ctx.quadraticCurveTo(302,268,318,265);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = sombra_pata;
	  ctx.moveTo(306,341);
	  ctx.bezierCurveTo(378,379,410,325,422,342);//parte oscura de la pata
	  ctx.bezierCurveTo(395,360,379,377,326,372);
	  ctx.quadraticCurveTo(313,359,306,341);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = sombra_blanca_pata;
	  ctx.moveTo(380,320);
	  ctx.bezierCurveTo(400,302,455,321,439.5,338);//punta de la pata
	  ctx.bezierCurveTo(425,340,427,318,380,324);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_1;
	  ctx.moveTo(560,120);
	  ctx.bezierCurveTo(528,94,495,89,452,88);//degradado cola solo arriba
	  ctx.bezierCurveTo(499,90,530,110,560,135);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_3;
	  ctx.moveTo(613,205);
	  ctx.bezierCurveTo(560,165,572,124,480,119);
	  ctx.bezierCurveTo(550,135,585,200,583,220);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_2;
	  ctx.moveTo(613,205);
	  ctx.bezierCurveTo(600,165,572,124,513,117);
	  ctx.bezierCurveTo(570,135,585,200,583,220);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_4;
	  ctx.moveTo(620,280);
	  ctx.bezierCurveTo(630,220,616,167,595,133);
	  ctx.bezierCurveTo(609,180,606,215,593,234);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_5;
	  ctx.lineTo(593,280);
	  ctx.moveTo(574,374);
	  ctx.bezierCurveTo(622,320,611,247,587,199);
	  ctx.bezierCurveTo(592,264,577,315,547,360);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_6;
	  ctx.moveTo(578,300);
	  ctx.bezierCurveTo(585,260,581,230,559,204);
	  ctx.bezierCurveTo(563,228,575,238,555,294);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_7;
	  ctx.moveTo(495,495);
	  ctx.bezierCurveTo(590,455,632,345,632,257);
	  ctx.bezierCurveTo(615,348,540,427,483,452);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_8;
	  ctx.moveTo(510,460);
	  ctx.bezierCurveTo(565,430,570,320,537,279);
	  ctx.bezierCurveTo(555,337,515,424,460,462);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_rojo_lomo;
	  ctx.moveTo(152,266);
	  ctx.bezierCurveTo(141,400,228,510,360,523);
	  ctx.lineTo(440,470);
	  ctx.bezierCurveTo(340,455,240,390,220,330);
	  ctx.lineTo(180,330);
	  ctx.lineTo(170,320);
	  ctx.lineTo(170,270);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cola_9;
	  ctx.moveTo(330,515);
	  ctx.bezierCurveTo(490,548,580,450,581,338);
	  ctx.bezierCurveTo(560,437,462,492,330,460);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_oreja_izq;
	  ctx.moveTo(200,94);
	  ctx.bezierCurveTo(177,112,170,146,175,180);
	  ctx.bezierCurveTo(188,160,210,146,225,137);
	  ctx.bezierCurveTo(215,130,203,121,200,94);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_cabeza;
	  ctx.moveTo(285,140);
	  ctx.bezierCurveTo(250,130,215,133,194,160);
	  ctx.bezierCurveTo(225,170,260,170,285,165);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_oreja_der;
	  ctx.moveTo(350,111);
	  ctx.bezierCurveTo(310,113,290,127,273,156);
	  ctx.lineTo(316,180);
	  ctx.bezierCurveTo(316,149,324,127,350,111);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_1;
	  ctx.moveTo(465,425);
	  ctx.bezierCurveTo(360,445,250,370,230,330);
	  ctx.lineTo(170,327);
	  ctx.bezierCurveTo(230,430,360,470,465,425);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_2;
	  ctx.moveTo(415,477);
	  ctx.bezierCurveTo(360,462,345,455,295,400);
	  ctx.lineTo(275,415);
	  ctx.bezierCurveTo(310,445,342,470,415,477);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_3;
	  ctx.moveTo(308,466);
	  ctx.bezierCurveTo(280,438,260,410,250,387);
	  ctx.lineTo(210,375);
	  ctx.bezierCurveTo(240,426,274,450,308,466);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_4;
	  ctx.moveTo(260,470);
	  ctx.bezierCurveTo(230,430,220,395,215,360);
	  ctx.lineTo(175,365);
	  ctx.bezierCurveTo(195,408,223,445,260,470);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_3;
	  ctx.moveTo(223,419);
	  ctx.bezierCurveTo(230,430,205,390,211,362);
	  ctx.lineTo(183,342);
	  ctx.bezierCurveTo(188,380,205,396,223,419);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_3;
	  ctx.moveTo(180,390);
	  ctx.bezierCurveTo(177,320,178,320,186,300);
	  ctx.lineTo(166,260);
	  ctx.bezierCurveTo(160,320,162,320,180,390);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_3;
	  ctx.moveTo(170,269);
	  ctx.bezierCurveTo(155,286,154,297,151,310);
	  ctx.lineTo(149,280);
	  ctx.lineTo(152,266);
	  ctx.fill();
	  //picos blancos del lomo
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos;
	  ctx.moveTo(263,145);
	  ctx.bezierCurveTo(250,148,234,160,233,183);
	  ctx.bezierCurveTo(250,155,250,160,263,145);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos;
	  ctx.moveTo(243,155);
	  ctx.bezierCurveTo(227,154,208,170,208,186);
	  ctx.bezierCurveTo(218,174,230,160,243,155);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos;
	  ctx.moveTo(235,139);
	  ctx.bezierCurveTo(205,148,185,170,187,184);
	  ctx.bezierCurveTo(215,155,200,170,235,139);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_1;
	  ctx.moveTo(195,180);
	  ctx.bezierCurveTo(188,190,179,200,175,209);
	  ctx.bezierCurveTo(175,196,177,186,180,178);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_1;
	  ctx.moveTo(212,184);
	  ctx.bezierCurveTo(205,190,198,200,193,212);
	  ctx.bezierCurveTo(191,200,195,185,200,173);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_2;
	  ctx.moveTo(215,199);
	  ctx.bezierCurveTo(212,205,208,205,201,228);
	  ctx.bezierCurveTo(200,218,200,201,206,194);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_2;
	  ctx.moveTo(195,210);
	  ctx.bezierCurveTo(191,213,179,234,170,248);
	  ctx.bezierCurveTo(171,231,175,213,180,202);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_3;
	  ctx.moveTo(197,230);
	  ctx.bezierCurveTo(185,250,180,285,179,313);
	  ctx.bezierCurveTo(175,283,172,257,173,238);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_4;
	  ctx.moveTo(173,235);
	  ctx.bezierCurveTo(167,244,162,253,159,263);
	  ctx.bezierCurveTo(158,252,158,245,161,231);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_2;
	  ctx.moveTo(180,200);
	  ctx.bezierCurveTo(173,208,166,217,160,226);
	  ctx.bezierCurveTo(161,219,163,208,167,198);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_5;
	  ctx.moveTo(209,247);
	  ctx.bezierCurveTo(205,258,206,267,208,277);
	  ctx.bezierCurveTo(197,270,195,261,194,250);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle = deg_lomo_picos_blancos_6;
	  ctx.moveTo(200,280);
	  ctx.bezierCurveTo(198,290,197,303,200,320);
	  ctx.bezierCurveTo(190,307,187,290,188,280);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.strokeStyle = "rgb(0,0,0)";
	  //ctx.moveTo(700,500);
	  ctx.arc(700,500,15,0,Math.PI*2,true);
	  ctx.stroke();
	  ctx.font="24px Arial";
	  ctx.strokeText("R",691.5,509);		  
          }
  	else {
  	  document.write("Su navegador no soporta esta tecnologia");
  	}
    }