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