Gumball
var bg = ctx.createRadialGradient(mouseX,mouseY,50,287,260,300)
bg.addColorStop(0,"purple")
bg.addColorStop(0.2,"cyan")
bg.addColorStop(0.4,"lime")
bg.addColorStop(0.6,"red")
bg.addColorStop(0.8,"yellow")
bg.addColorStop(1,"magenta")
//background
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height)
ctx.closePath();
ctx.fillStyle = bg
ctx.fill();
//ears
//ear 1
ctx.beginPath();
ctx.moveTo(357,44);
ctx.bezierCurveTo(301,23,225,140,303,181);
ctx.bezierCurveTo(398,184,410,63,357,44)
ctx.closePath();
ctx.fillStyle = "rgba(91,193,207,1)"
ctx.fill();
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth =5;
ctx.stroke();
//ear 2
ctx.beginPath();
ctx.moveTo(563,183);
ctx.bezierCurveTo(524,118,294,161,340,295);
ctx.bezierCurveTo(396,428,596,263,563,183)
ctx.closePath();
ctx.fillStyle = "rgba(91,193,207,1)"
ctx.fill();
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth =5;
ctx.stroke();
var fc = ctx.createRadialGradient(303,291,100,284,279,320)
fc.addColorStop(0,"rgba(91,193,207,1)")
fc.addColorStop(1,"rgba(123,234,254,1)")
//face
ctx.beginPath();
ctx.moveTo(125,190);
ctx.bezierCurveTo(172,-38,628,86,480,370);
ctx.bezierCurveTo(377,600,-190,305,125,190)
ctx.closePath();
ctx.fillStyle = fc
ctx.fill();
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth =5;
ctx.stroke();
//eyebrows
//eyebrow1
ctx.beginPath();
ctx.arc(265,180,85,1.4*Math.PI,1.63*Math.PI,false);
ctx.lineWidth = 20;
ctx.lineCap = "round"
ctx.stroke();
//eyebrow2
ctx.beginPath();
ctx.arc(383,219,85,1.6*Math.PI,1.78*Math.PI,false);
ctx.lineWidth = 20;
ctx.lineCap = "round"
ctx.stroke();
//eyes
//eye1
ctx.beginPath();
ctx.arc(226,195,67,0*Math.PI,2*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)"
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.stroke();
//eye2
ctx.beginPath();
ctx.arc(383,248,70,0*Math.PI,2*Math.PI,false);
ctx.closePath();
ctx.fillStyle = "rgba(255,255,255,1)"
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.stroke();
//pupil1
ctx.beginPath();
ctx.arc(235,192,46,0*Math.PI,2*Math.PI,false);
ctx.fillStyle = "rgba(0,0,0,1)"
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.stroke();
//pupil2
ctx.beginPath();
ctx.arc(394,241,46,0*Math.PI,2*Math.PI,false);
ctx.fillStyle = "rgba(0,0,0,1)"
ctx.fill();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.stroke();
//nose and mouth
ctx.beginPath();
ctx.moveTo(310,287);
ctx.bezierCurveTo(252,245,173,266,191,271)
ctx.bezierCurveTo(199,296,294,295,310,287)
ctx.closePath();
ctx.fillStyle = "red"
ctx.fill();
ctx.lineWidth =5;
ctx.stroke();
//whiskers
//1
ctx.beginPath();
ctx.moveTo(34,302);
ctx.lineTo(78,283)
//ctx.closePath();
ctx.lineWidth =10
ctx.lineCap = "round"
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.stroke();
//2
ctx.beginPath();
ctx.moveTo(64,352);
ctx.lineTo(101,328)
//ctx.closePath();
ctx.lineWidth =10
ctx.lineCap = "round"
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(370,451);
ctx.lineTo(353,405)
//ctx.closePath();
ctx.lineWidth =10
ctx.lineCap = "round"
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(416,436);
ctx.lineTo(398,392)
//ctx.closePath();
ctx.lineWidth =10
ctx.lineCap = "round"
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.stroke();
//3
ctx.beginPath();
ctx.moveTo(459,401);
ctx.lineTo(436,369)
//ctx.closePath();
ctx.lineWidth =10
ctx.lineCap = "round"
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.stroke();
//hand
ctx.beginPath();
ctx.moveTo(142,391);
ctx.bezierCurveTo(187,336,237,388,225,409);
ctx.bezierCurveTo(202,451,134,417,142,391)
ctx.closePath();
ctx.fillStyle = "rgba(91,193,207,1)"
ctx.fill();
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth =5;
ctx.stroke();
//finger
ctx.beginPath();
ctx.moveTo(161,384);
ctx.bezierCurveTo(172,296,235,350,186,373);
//ctx.closePath();
ctx.fillStyle = "rgba(91,193,207,1)"
ctx.fill();
ctx.strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth =5;
ctx.stroke();
Comments
Post a Comment