html-canvas学習

その日、クラスメートがcanvasでドラえもんを描いたのを見て、とてもかわいいと思って、canvasの使い方を学びたいと思っていました.
今日はちびまる子ちゃんをcanvasで描きました.
コードはここにある

var pageOnload = function(){
    var c=document.getElementById("xiaowanzi");
    var cans=c.getContext("2d");
    //  
    cans.beginPath();
    cans.moveTo(20,320);
    cans.bezierCurveTo(60,-100,482,-108,542,277);
    cans.fillStyle='black';
    cans.fill();
    
    //       
    cans.beginPath();
    cans.moveTo(20,320);
    cans.bezierCurveTo(0,374,143,334,82,310);
    cans.fillStyle='black';
    cans.fill();

    cans.beginPath();
    cans.moveTo(480,328);
    cans.quadraticCurveTo(615,390,518,190);
    cans.fillStyle='black';
    cans.fill();
    
    //  
    cans.beginPath();
    cans.moveTo(89,277);
    cans.lineTo(79,237);
    cans.lineTo(91,229);
    cans.lineTo(110,245);
    cans.lineTo(114,183);
    cans.lineTo(158,211);
    cans.lineTo(164,139);
    cans.lineTo(215,176);

    cans.lineTo(244,104);
    cans.lineTo(286,172);
    cans.lineTo(344,108);
    cans.lineTo(357,174);
    cans.lineTo(409,133);
    cans.lineTo(415,191);
    cans.lineTo(450,175);
    cans.lineTo(459,225);
    cans.lineTo(488,219);
    cans.lineTo(500,250);

    cans.fillStyle='#FBD1CA';
    cans.fill();
    //  
    cans.beginPath();
    cans.moveTo(89,276);
    cans.bezierCurveTo(110,360,105,405,262,428);
    cans.fillStyle='#FBD1CA';
    cans.fill();
    cans.beginPath();
    cans.moveTo(500,245);
    cans.bezierCurveTo(480,360,470,430,262,426);
    cans.fillStyle='#FBD1CA';
    cans.fill();
    cans.beginPath();
    cans.moveTo(88,276);
    cans.lineTo(261,427);
    cans.lineTo(498,248);
    cans.fillStyle='#FBD1CA';
    cans.fill();
    //  
    cans.beginPath();
    cans.moveTo(140,217);
    cans.quadraticCurveTo(202,107,257,169);
    cans.lineWidth=5;
    cans.stroke();
    cans.beginPath();
    cans.moveTo(327,169);
    cans.quadraticCurveTo(377,107,444,220);
    cans.lineWidth=5;
    cans.stroke();
    cans.strokeStyle="black";
    cans.lineWidth=2;
    cans.stroke();
    //  
    cans.beginPath();
    cans.arc(240,247,17,0,2*Math.PI);
    cans.fillStyle='black';
    cans.fill();
    cans.beginPath();
    cans.arc(341,253,17,0,2*Math.PI);
    cans.fillStyle='black';
    cans.fill();

    //  
    cans.beginPath();
    cans.moveTo(233,329);
    cans.quadraticCurveTo(315,453,340,315);
    cans.fillStyle='#BF5A5A';
    cans.fill();
    cans.beginPath();
    cans.moveTo(234,329);
    cans.quadraticCurveTo(315,453,340,315);
    cans.strokeStyle="black";
    cans.lineWidth=3;
    cans.stroke();
    cans.beginPath();
    cans.moveTo(234,329);
    cans.lineTo(340,315);
    cans.stroke();

    //  
    cans.beginPath();
    cans.arc(145,342,15,0,2*Math.PI);
    cans.shadowColor="#EF7272";
    cans.shadowBlur=30;
    cans.fillStyle="#EF7272";
    cans.fill();

    cans.beginPath();
    cans.arc(445,345,15,0,2*Math.PI);
    cans.shadowColor="#EF7272";
    cans.shadowBlur=30;
    cans.fillStyle="#EF7272";
    cans.fill(); 

    //  
    cans.beginPath();
    cans.moveTo(89,277);
    cans.quadraticCurveTo(50,288,100,328);
    cans.fillStyle='#FBD1CA';
    cans.shadowBlur=0;
    cans.fill();

    cans.beginPath();
    cans.moveTo(495,265);
    cans.quadraticCurveTo(545,250,479,328);
    cans.fillStyle='#FBD1CA';
    cans.fill();
}