1) Abrir Bloc de Notas
2) Copiar y pegar este código
3) Guardar con el nombre que quieran pero con extensión .html
4) ENJOY!
2) Copiar y pegar este código
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DESMOND ES MI PASTOR</title>
<style>
canvas {
display: block;
position: absolute;
border: 1px solid #000;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body style="background-color:grey;">
<canvas id="myCanvas" width="698px" height="740px"
style="border:1px solid #c3c3c3;" onclick="getnigga()">
Your browser does not support the canvas element (aweonao).
</canvas>
<script>
circX=-100;
//fijo=-100;
circY=30;
separacion=130;
n=8;
letraX=-800;
letraY=65;
ld=10;
li=620;
lc=3;
blank="white";
function getnigga(){
if(blank=="white"){
blank="#4d2500";
}else if (blank=="#4d2500") {
blank="white";
}
}
function abusheo(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,698,740);
if(blank=="#4d2500"){
ctx.beginPath();
ctx.fillStyle="#f00";
ctx.fillRect(0,0,698,740);
for(j=0;j<n;j++){
for(i=0;i<n;i++){
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(circX+(j*100)+(100*j),circY+(i*100)+(30*i),50,0,2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle="black";
ctx.fillRect(-30+circX+(j*100)+(100*j),circY+(i*100)+(30*i),60,10);
ctx.fillRect(-5+circX+(j*100)+(100*j),-25+circY+(i*100)+(30*i),10,60);
ctx.fillRect(circX+(j*100)+(100*j),-25+circY+(i*100)+(30*i) ,30,10);
ctx.fillRect(-30+circX+(j*100)+(100*j),25+circY+(i*100)+(30*i) ,30,10);
ctx.fillRect(-30+circX+(j*100)+(100*j),-25+circY+(i*100)+(30*i),10,30);
ctx.fillRect(20+circX+(j*100)+(100*j),5+circY+(i*100)+(30*i),10,30);
}
}
}else{
ctx.beginPath();
ctx.fillStyle="#ff80d4";
ctx.fillRect(0,0,698,740);
for(j=0;j<n;j++){
for(i=0;i<n;i++){
ctx.beginPath();
ctx.fillStyle="#b3ffff";
ctx.font="bold 70px Arial";
ctx.fillText("ABUSHEO",letraX+(j*300)+(100*j)+(i*30),letraY+(i*100)+(30*i));
ctx.fill();
}
}
}
ctx.beginPath();
ctx.fillStyle="#cc0000";
ctx.fillRect(li+ld*5,720,2,13);
ctx.beginPath();
ctx.fillRect(li+ld*5,725,7,2);
ctx.beginPath();
ctx.fillRect(li+ld*5,720,7,2);
ctx.beginPath();
ctx.fillRect(li+ld*5,731,7,2);
ctx.beginPath();
ctx.fillRect(li+ld*3,720,2,13);
ctx.fillRect(li+ld*3,731,7,2);
ctx.fillRect(li+5+ld*3,720,2,13);
ctx.fillRect(li+ld*3,720,7,2);
ctx.fillRect(li+7+ld*3,733,2,2);
ctx.fillRect(li+6+ld*3,732,2,2);
ctx.beginPath();
ctx.fillRect(li+4+ld*2,720,2,13);
ctx.beginPath();
ctx.fillRect(li+ld*4,720,2,13);
ctx.fillRect(li+ld*4,731,7,2);
ctx.fillRect(li+5+ld*4,720,2,13);
ctx.beginPath();
ctx.fillRect(lc+li+ld*1,720,2,13);
ctx.fillRect(lc+li+2+ld*1,725,2,2);
ctx.fillRect(lc+li+4+ld*1,723,2,2);
ctx.fillRect(lc+li+6+ld*1,721,2,2);
ctx.fillRect(lc+li+2+ld*1,727,2,2);
ctx.fillRect(lc+li+4+ld*1,729,2,2);
ctx.fillRect(lc+li+6+ld*1,731,2,2);
circX++;
if(circX==100){
circX=-100;
}
letraX++;
if(letraX==-400){
letraX=-800;
}
ctx.beginPath();
ctx.strokeStyle="black";
ctx.fillStyle=blank;
ctx.lineWidth=10;
ctx.moveTo(188,511);
ctx.quadraticCurveTo(148,519, 131,494);
ctx.quadraticCurveTo(88,399, 114,375);
ctx.lineTo(155,375);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(374,690);
ctx.quadraticCurveTo(326,700,276,642);
ctx.quadraticCurveTo(180,550, 183,504);
ctx.lineTo(172,461);
ctx.quadraticCurveTo(165,421, 150,421);
ctx.quadraticCurveTo(140,416, 140,405);
ctx.quadraticCurveTo(133,382, 115,376);
ctx.quadraticCurveTo(107,370, 109,361);
ctx.quadraticCurveTo(112,353, 111,344);
ctx.quadraticCurveTo(112,335, 109,324);
ctx.quadraticCurveTo(108,307, 115,292);
ctx.quadraticCurveTo(120,273, 119,252);
ctx.quadraticCurveTo(121,173, 139,143);
ctx.quadraticCurveTo(153,125, 171,113);
ctx.lineTo(203,88);
ctx.quadraticCurveTo(224,70, 252,64);
ctx.quadraticCurveTo(333,35, 360,55);
ctx.quadraticCurveTo(367,60, 375,55);
ctx.quadraticCurveTo(424,32, 496,113);
ctx.lineTo(550,191);
ctx.quadraticCurveTo(555,202, 565,202);
ctx.quadraticCurveTo(575,207, 571,217);
ctx.quadraticCurveTo(562,231, 562,252);
ctx.quadraticCurveTo(560,273, 551,281);
ctx.quadraticCurveTo(564,312, 555,331);
ctx.quadraticCurveTo(552,345, 558,356);
ctx.quadraticCurveTo(568,365, 557,376);
ctx.quadraticCurveTo(558,391, 554,400);
ctx.quadraticCurveTo(551,412, 552,422);
ctx.quadraticCurveTo(550,454, 541,484);
ctx.quadraticCurveTo(528,509, 518,536);
ctx.quadraticCurveTo(503,576, 484,605);
ctx.quadraticCurveTo(473,642, 452,666);
ctx.quadraticCurveTo(417,693, 374,690);
ctx.fillStyle="black";
ctx.fill();
ctx.beginPath();
ctx.moveTo(247,194);
ctx.quadraticCurveTo(266,204, 293,194);
ctx.quadraticCurveTo(305,189, 328,189);
ctx.quadraticCurveTo(340,201, 346,198);
ctx.quadraticCurveTo(356,195, 366,207);
ctx.quadraticCurveTo(382,226, 397,221);
ctx.quadraticCurveTo(410,217, 423,224);
ctx.quadraticCurveTo(438,231, 433,217);
ctx.quadraticCurveTo(431,211, 436,211);
ctx.quadraticCurveTo(459,194, 501,221);
ctx.quadraticCurveTo(510,229, 514,256);
ctx.quadraticCurveTo(515,262, 522,260);
ctx.quadraticCurveTo(526,260, 526,265);
ctx.quadraticCurveTo(517,273, 540,346);
ctx.quadraticCurveTo(532,343, 529,336);
ctx.quadraticCurveTo(518,321, 503,331);
ctx.quadraticCurveTo(475,342, 465,338);
ctx.quadraticCurveTo(447,335, 433,355);
ctx.quadraticCurveTo(405,390, 423,413);
ctx.quadraticCurveTo(428,421, 426,430);
ctx.quadraticCurveTo(430,451, 442,463);
ctx.quadraticCurveTo(453,473, 458,486);
ctx.quadraticCurveTo(423,518, 402,515);
ctx.quadraticCurveTo(415,520, 426,515);
ctx.quadraticCurveTo(447,508, 458,495);
ctx.quadraticCurveTo(468,477, 456,463);
ctx.quadraticCurveTo(439,444, 428,416);
ctx.quadraticCurveTo(434,400, 428,389);
ctx.quadraticCurveTo(424,378, 433,370);
ctx.quadraticCurveTo(439,361, 457,361);
ctx.quadraticCurveTo(446,363, 439,372);
ctx.quadraticCurveTo(449,367, 454,367);
ctx.quadraticCurveTo(455,373, 461,375);
ctx.quadraticCurveTo(454,377, 453,380);
ctx.quadraticCurveTo(462,376, 477,375);
ctx.quadraticCurveTo(485,376, 488,370);
ctx.quadraticCurveTo(494,370, 491,378);
ctx.quadraticCurveTo(503,377, 508,384);
ctx.quadraticCurveTo(514,389, 522,387);
ctx.lineTo(522,378);
ctx.quadraticCurveTo(519,376, 519,370);
ctx.quadraticCurveTo(518,366, 513,365);
ctx.quadraticCurveTo(508,365, 503,363);
ctx.quadraticCurveTo(496,360, 490,361);
ctx.quadraticCurveTo(494,353, 503,357);
ctx.quadraticCurveTo(508,360, 514,360);
ctx.quadraticCurveTo(533,367, 532,378);
ctx.quadraticCurveTo(538,373, 537,367);
ctx.quadraticCurveTo(539,358, 541,358);
ctx.quadraticCurveTo(557,368, 547,425);
ctx.quadraticCurveTo(547,456, 538,476);
ctx.quadraticCurveTo(524,497, 511,536);
ctx.quadraticCurveTo(501,566, 488,584);
ctx.quadraticCurveTo(481,591, 477,607);
ctx.quadraticCurveTo(466,639, 443,659);
ctx.quadraticCurveTo(430,662, 419,672);
ctx.quadraticCurveTo(406,683, 389,682);
ctx.quadraticCurveTo(373,680, 362,681);
ctx.quadraticCurveTo(303,677, 247,606);
ctx.quadraticCurveTo(238,597, 231,580);
ctx.quadraticCurveTo(224,568, 213,557);
ctx.quadraticCurveTo(195,523, 199,491);
ctx.quadraticCurveTo(205,472, 191,454);
ctx.quadraticCurveTo(163,401, 174,386);
ctx.quadraticCurveTo(177,376, 177,371);
ctx.lineTo(177,343);
ctx.quadraticCurveTo(179,327, 191,318);
ctx.quadraticCurveTo(212,305, 197,258);
ctx.quadraticCurveTo(180,223, 247,194);
ctx.fillStyle=blank;
ctx.fill();
ctx.beginPath();
ctx.strokeStyle="red";
ctx.lineWidth=1;
ctx.fillStyle="black";
ctx.moveTo(239,390);
ctx.quadraticCurveTo(243,370, 274,366);
ctx.quadraticCurveTo(266,367, 263,373);
ctx.quadraticCurveTo(266,375, 271,373);
ctx.quadraticCurveTo(303,349, 331,385);
ctx.quadraticCurveTo(327,378, 310,373);
ctx.quadraticCurveTo(306,380, 301,385);
ctx.lineTo(278,385);
ctx.quadraticCurveTo(272,384, 271,380);
ctx.quadraticCurveTo(267,381, 267,387);
ctx.lineTo(239,390);
ctx.fill();
ctx.beginPath();
ctx.lineWidth=1;
ctx.moveTo(329,368);
ctx.quadraticCurveTo(298,348, 275,361);
ctx.quadraticCurveTo(250,370, 230,368);
ctx.quadraticCurveTo(225,372, 214,374);
ctx.quadraticCurveTo(202,364, 210,358);
ctx.quadraticCurveTo(210,340, 215,340);
ctx.quadraticCurveTo(222,340, 228,337);
ctx.quadraticCurveTo(241,331, 258,340);
ctx.quadraticCurveTo(279,346, 300,340);
ctx.quadraticCurveTo(312,336, 323,340);
ctx.quadraticCurveTo(329,342, 336,342);
ctx.quadraticCurveTo(340,342, 337,346);
ctx.quadraticCurveTo(334,351, 340,351);
ctx.quadraticCurveTo(345,357, 314,356);
ctx.quadraticCurveTo(323,359, 329,368);
ctx.fill();
ctx.beginPath();
ctx.moveTo(315,553);
ctx.quadraticCurveTo(330,551, 345,559);
ctx.quadraticCurveTo(376,567, 410,560);
ctx.quadraticCurveTo(417,555, 425,558);
ctx.quadraticCurveTo(433,558, 439,553);
ctx.quadraticCurveTo(455,547, 465,547);
ctx.quadraticCurveTo(450,555, 441,566);
ctx.quadraticCurveTo(426,575, 399,572);
ctx.lineTo(418,570);
ctx.quadraticCurveTo(425,563, 418,560);
ctx.quadraticCurveTo(414,562, 410,566);
ctx.quadraticCurveTo(383,571, 353,564);
ctx.quadraticCurveTo(359,569, 368,572);
ctx.quadraticCurveTo(340,567, 315,553);
ctx.fill();
ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(293,368,3,0,2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(466,365,3,0,2*Math.PI);
ctx.fill();
setTimeout(function(){ abusheo(); }, 1);
}
abusheo();
</script>
</body>
</html>3) Guardar con el nombre que quieran pero con extensión .html
4) ENJOY!
veo bien pajero hacerlo a manuela palma 
abusheo();
2: 
le quedó weno eso sí
Abusheo's Creed
