わぷーの塗り絵をcanvasとSVGで作ってみる

わぷーの SVG

わぷーは公式で SVG が公開されいています。PNG 画像などから塗り絵を作るのは少し大変ですが、SVG でも配布してくれてるなら塗り絵簡単に作れるんじゃ、と思ったがはじまり。

参考：わぷーのSVG

以下のわぷーは SVG のわぷーです。

SVG

<svg width="60px" height="66px" viewBox="0 0 60 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <title>wapuu</title>
    <desc>Created with Sketch.</desc>
    <g id="wapuu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M58.2578698,3.65519355 C57.8886391,3.56329032 57.2865089,3.51893548 54.8655621,3.51893548 C54.083787,3.51893548 53.1951479,3.52354839 52.2504142,3.52816129 C51.1839053,3.53348387 50.0453254,3.53916129 48.9088757,3.53916129 C47.0818935,3.53916129 44.5235503,3.52603226 42.7029586,3.42170968 C39.7871006,1.30296774 36.4281657,0.172096774 32.7113609,0.0599677419 C24.6568047,-0.186645161 17.5253254,3.2936129 13.6636686,9.27619355 C12.3585799,10.5167097 9.90319527,11.8959677 9.23928994,12.0432258 C8.12627219,12.2905484 7.4052071,13.2649355 7.52556213,14.3596129 C7.61218935,15.1487742 8.17349112,16.0355161 9.4260355,16.4478387 C9.28153846,16.5897742 9.14378698,16.7388065 9.0156213,16.8931613 C8.16674556,17.9154516 7.81171598,19.0775484 8.01585799,20.1658387 C8.05704142,20.3840645 8.11420118,20.5927097 8.18698225,20.7910645 C6.35076923,23.9150645 5.38473373,27.4613226 5.38473373,31.1072903 C5.38473373,32.0280968 5.44686391,32.9442903 5.57005917,33.8516129 C5.28106509,33.8015806 4.99065089,33.7760323 4.70023669,33.7760323 C3.3035503,33.7760323 2.0087574,34.3813871 1.14887574,35.4366774 C0.199171598,36.6026774 -0.133846154,38.1625484 0.211242604,39.828871 C0.913846154,43.2229032 6.05822485,48.9446774 10.1602367,49.929 C10.5642604,50.0255161 10.9501775,50.0748387 11.3069822,50.0748387 C12.4043787,50.0748387 13.3107692,49.6124839 13.86,48.7729355 C14.0343195,48.5060968 14.160355,48.2229355 14.2476923,47.9333871 C17.0471006,49.863 20.2831953,51.0580968 23.7113609,51.405129 C24.4540828,53.8272581 26.448284,54.2310645 27.6926627,54.2310645 C29.5686391,54.2310645 31.1893491,53.468871 32.3449704,52.0637097 C32.4493491,52.065129 32.5540828,52.0661935 32.6591716,52.0661935 C33.4523077,52.0661935 34.4378698,52.0119032 35.5654438,51.8380323 C31.956213,55.8860323 26.7422485,58.2155484 22.9029586,58.2162581 L22.9018935,58.2162581 C21.2836686,58.2162581 19.1098225,57.8035806 17.9417751,55.8399032 C16.3963314,53.2417742 13.9189349,51.6276129 11.4770414,51.6276129 C8.91195266,51.6276129 7.12970414,53.4376452 7.04272189,56.1312258 C6.99550296,57.5892581 7.75988166,59.1750323 9.25349112,60.7164516 C11.7660355,63.3099677 16.6381065,65.9269032 21.8598817,65.9269032 C23.0137278,65.9269032 24.144497,65.7977419 25.2205917,65.5429677 C34.4740828,63.3525484 42.7650888,55.9477742 45.1768047,47.8035161 C54.0092308,41.0594516 53.3091124,22.519129 50.3822485,14.2524516 C50.1791716,13.6786774 49.9597633,13.1166129 49.7243787,12.5680323 C50.0804734,12.6091935 50.4326627,12.6297742 50.7791716,12.6297742 C51.588284,12.6297742 52.3764497,12.5162258 53.1223669,12.2926774 C57.7132544,10.9162581 59.7873373,7.51016129 59.7440237,5.64122581 C59.7213018,4.65477419 59.1376331,3.87519355 58.2578698,3.65519355" id="all-outline" fill="#000000"></path>
        <path d="M43.152426,25.335129 C40.3029586,22.7820645 38.3385799,21.2129677 35.5139645,20.6289032 C33.6149112,20.2364516 31.3484024,20.7389032 29.3488757,21.1820968 C27.8336095,21.5184839 26.5249704,21.8094516 25.5067456,21.7015806 C23.9428402,21.5369355 22.7030769,20.7144194 22.3498225,19.6051935 C22.1009467,18.8238387 22.1691124,17.5716129 23.9091124,16.0411935 C24.6330178,15.4042581 25.4992899,14.872 26.4489941,14.4394516 C25.0792899,14.4415806 23.7259172,14.1782903 22.4250888,13.488129 C20.7450888,15.820129 16.4811834,17.5095161 15.1689941,16.9272258 C14.8775148,16.7977097 14.5519527,16.5755806 14.2512426,16.2658065 C14.2228402,16.2878065 14.196568,16.3119355 14.1681657,16.3342903 C14.5143195,16.6582581 14.7667456,17.1120968 14.8757396,17.6425806 C15.0969231,18.7180968 14.7202367,19.8688387 13.8678107,20.7204516 C13.1257988,21.4624194 12.1910059,21.887871 11.303787,21.887871 C10.6831953,21.887871 10.1534911,21.672129 9.75656805,21.2952903 C8.00130178,24.1520968 6.98236686,27.5085161 6.98236686,31.1072903 C6.98236686,32.7828387 7.20639053,34.4051613 7.61786982,35.9511935 C9.37952663,37.4024839 12.2811834,43.1679032 12.9142012,44.6142258 C12.9486391,44.6933548 12.9876923,44.7934194 13.0278107,44.9090968 C16.0473373,47.6995484 19.9814201,49.5166774 24.3326627,49.8523548 C24.2779882,49.1330968 24.3024852,48.3666452 24.3276923,47.6097742 C24.3582249,46.6825806 24.3901775,45.7234516 24.2691124,44.9357097 C24.1693491,44.2874194 24.0028402,43.5919355 23.8263905,42.8556452 C23.1692308,40.1102581 22.4236686,36.9983226 25.0505325,35.2482581 C25.5539645,34.9125806 26.1014201,34.7422581 26.6769231,34.7422581 C29.0371598,34.7422581 31.1826036,37.5866452 32.2895858,39.7493871 C33.7970414,37.3105806 36.2744379,35.7641935 39.2204734,35.4657742 C40.7123077,35.3142581 42.2009467,35.5076452 43.427929,35.9618387 C43.8607101,34.3884839 44.0829586,32.7576452 44.0829586,31.1072903 C44.0829586,29.1326129 43.7698225,27.1909355 43.152426,25.335129" id="WordPress-blue2" fill="#005683"></path>
        <path d="M30.9294675,20.8457097 C30.3923077,20.9510968 29.8618935,21.0681935 29.3488757,21.1820968 C27.8336095,21.5184839 26.5249704,21.8094516 25.5067456,21.7015806 C23.9428402,21.5369355 22.7030769,20.7144194 22.3498225,19.6051935 C22.1009467,18.8238387 22.1691124,17.5716129 23.9091124,16.0411935 C23.9343195,16.0191935 23.9627219,15.9993226 23.987929,15.9773226 C22.8678107,15.6121935 21.6880473,15.3790645 20.4667456,15.2963871 C18.5364497,16.5997097 16.104142,17.3420323 15.1689941,16.9272258 C14.8778698,16.7977097 14.5526627,16.5759355 14.2523077,16.2665161 C14.2246154,16.2895806 14.1969231,16.3122903 14.1685207,16.3346452 C14.5146746,16.6586129 14.7667456,17.1124516 14.8757396,17.6425806 C15.0969231,18.7180968 14.7202367,19.8688387 13.8678107,20.7204516 C13.1257988,21.4624194 12.1910059,21.887871 11.303787,21.887871 C10.6828402,21.887871 10.1527811,21.6717742 9.75585799,21.2945806 C8.00094675,24.1513871 6.98236686,27.5085161 6.98236686,31.1072903 C6.98236686,32.7814194 7.20248521,34.4040968 7.61467456,35.9483548 C8.79621302,36.9188387 10.4911243,39.833129 11.6712426,42.0863548 C13.9253254,43.5202581 16.5979882,44.3548387 19.4680473,44.3548387 C21.0539645,44.3548387 22.5791716,44.0979355 24.0085207,43.6291935 C23.9502959,43.3761935 23.8895858,43.1196452 23.8263905,42.8556452 C23.1692308,40.1102581 22.4236686,36.9983226 25.0505325,35.2482581 C25.5539645,34.9125806 26.1014201,34.7422581 26.6769231,34.7422581 C28.4921893,34.7422581 30.1778698,36.4245484 31.3640237,38.1852581 C33.0376331,35.816 34.0242604,32.9272581 34.0242604,29.8064516 C34.0242604,26.4244839 32.8665089,23.3153871 30.9294675,20.8457097" id="WordPress-blue1" fill="#00709C"></path>
        <path d="M18.2147929,40.972871 C17.4085207,41.0250323 16.752426,40.9785484 15.9511243,40.8124839 C15.7093491,38.4041935 15.5534911,35.395871 16.7673373,30.1520645 C18.972426,35.86 21.4011834,40.0456774 21.4185799,40.0687419 C21.0056805,40.2656774 19.7495858,40.8646452 18.2147929,40.972871 M14.5168047,40.3646774 C8.20757396,37.499 7.04946746,30.7059677 9.16650888,25.4767097 C9.24710059,30.6516774 10.6970414,34.6865484 14.5168047,40.3646774 M23.0566864,39.0872581 C24.0575148,34.7763226 25.7211834,30.6552258 26.7,26.3379032 C26.8888757,25.5033226 27.0525444,24.2046129 26.7582249,22.7565161 C29.6740828,27.3090968 29.3392899,34.3803226 23.0566864,39.0872581 M10.0537278,23.7419032 C12.9017751,19.3607097 18.348284,15.7974194 24.3262722,20.1732903 C24.2861538,20.1715161 20.4940828,20.3453871 23.2501775,24.4203548 C24.7398817,26.6224839 24.8346746,28.3892258 23.6563314,31.9819677 C23.2310059,33.7533226 23.1024852,34.2880645 22.7226036,36.1119355 C20.903787,31.7672903 19.4194083,28.0684516 18.2471006,23.3384516 C19.2777515,23.1872903 20.4454438,23.0159032 19.8454438,22.3530645 C19.7698225,22.2696774 14.3407101,22.8079677 14.2888757,22.8168387 C13.872071,22.8878065 13.7989349,23.3781935 13.7982249,23.3828065 C13.7549112,23.7699355 13.8252071,23.7660323 15.0014201,23.6950645 C15.3113609,25.3649355 15.4526627,26.1274839 16.2195266,28.564871 C15.6660355,30.8652903 15.0930178,33.244129 15.0145562,36.9277097 C12.5407101,32.0064516 11.5505325,28.5882903 11.3616568,24.3153226 C11.7127811,24.1020645 12.1817751,24.1858065 12.492071,23.8682258 C12.7036686,23.6514194 12.8066272,23.1624516 12.5428402,23.1056774 C11.6073373,22.904129 10.8933728,23.5666129 10.0537278,23.7419032 M18.6497041,17.2664516 C9.2904142,18.0385806 3.21301775,32.1345484 11.4905325,39.5112903 C19.8798817,46.9870323 30.2446154,37.3276129 29.8867456,28.3650968 C29.6087574,21.4166452 23.8523077,17.0166452 18.6497041,17.2664516" id="WordPress-logo" fill="#FFFFFF"></path>
        <path d="M31.8127811,42.5270645 C31.8071006,42.5047097 31.8021302,42.4830645 31.7964497,42.4603548 C31.7456805,42.2580968 31.6895858,42.0498065 31.6263905,41.8333548 C31.0991716,39.9356774 28.5919527,36.1616129 26.6769231,36.1616129 C26.3826036,36.1616129 26.1081657,36.2492581 25.8379882,36.4291613 C24.1611834,37.5469032 24.4995266,39.5687742 25.2078107,42.5256452 C25.3828402,43.2569677 25.5639053,44.0134839 25.6725444,44.7196129 C25.8142012,45.6382903 25.7797633,46.6648387 25.7467456,47.6569677 C25.6956213,49.1976774 25.6427219,50.7912581 26.3073373,51.477871 C26.5981065,51.7784194 27.0511243,51.9246129 27.6926627,51.9246129 C27.8783432,51.9246129 28.0530178,51.9107742 28.2220118,51.8894839 C28.2734911,51.8830968 28.3221302,51.8735161 28.3718343,51.8653548 C28.4897041,51.8461935 28.6036686,51.8227742 28.7133728,51.7943871 C28.7620118,51.7816129 28.8106509,51.7684839 28.8578698,51.7539355 C28.9721893,51.7191613 29.0815385,51.6790645 29.1866272,51.6347097 C29.2175148,51.6219355 29.2501775,51.6105806 29.280355,51.5970968 C29.4152663,51.5357097 29.543787,51.4679355 29.664497,51.3934194 C29.676213,51.3859677 29.6868639,51.3774516 29.6985799,51.37 C29.8054438,51.301871 29.9062722,51.2294839 30.0017751,51.1531935 C30.0298225,51.1308387 30.0564497,51.1077742 30.083787,51.0847097 C30.1622485,51.0183548 30.2371598,50.9495161 30.3081657,50.8789032 C30.3319527,50.855129 30.3564497,50.8313548 30.3795266,50.8072258 C30.4590533,50.7234839 30.5343195,50.6376129 30.6046154,50.5503226 C30.6127811,50.5400323 30.6220118,50.5304516 30.6298225,50.5201613 C30.708284,50.4208065 30.780355,50.3196774 30.8474556,50.2181935 C30.863432,50.1944194 30.8772781,50.1702903 30.8921893,50.146871 C30.9397633,50.0716452 30.9852071,49.9964194 31.0271006,49.9219032 C31.0473373,49.8860645 31.0665089,49.8509355 31.0853254,49.8154516 C31.1179882,49.7537097 31.1488757,49.6926774 31.1779882,49.632 C31.1960947,49.5940323 31.2152663,49.5557097 31.2323077,49.5180968 C31.2564497,49.4652258 31.2773964,49.4144839 31.2986982,49.3633871 C31.343432,49.2565806 31.3835503,49.1533226 31.4169231,49.0582258 C31.4190533,49.0529032 31.4211834,49.0472258 31.4229586,49.0422581 C31.4463905,48.974129 31.4676923,48.9095484 31.4861538,48.8495806 C31.5667456,48.5873548 31.6033136,48.4035484 31.6086391,48.3726774 C31.6139645,48.3421613 31.6214201,48.3102258 31.6310059,48.281129 C32.1631953,46.5974194 32.3769231,45.1812581 31.943432,43.0965806 C31.9050888,42.9120645 31.8610651,42.721871 31.8127811,42.5270645" id="sole-left" fill="#FFD200"></path>
        <path d="M11.3069822,49.0103226 L11.3069822,49.0103226 C11.0336095,49.0103226 10.7314793,48.9712903 10.4087574,48.8939355 C6.80698225,48.0295484 1.87739645,42.6242903 1.2539645,39.613129 C0.975266272,38.2665161 1.2312426,37.0217419 1.97467456,36.1090968 C2.63183432,35.3029032 3.6252071,34.8405484 4.70023669,34.8405484 C5.66804734,34.8405484 6.65147929,35.2035484 7.5443787,35.8901613 C9.29786982,37.2381935 12.2723077,43.1480323 12.9142012,44.6142258 C13.1811834,45.2241935 13.7112426,47.0551613 12.9685207,48.1906452 C12.7239053,48.5646452 12.2368047,49.0103226 11.3069822,49.0103226 L11.3069822,49.0103226 L11.3069822,49.0103226 L11.3069822,49.0103226 Z M4.70023669,35.9050645 C3.93585799,35.9050645 3.26094675,36.2162581 2.80118343,36.7808065 C2.26331361,37.4411613 2.0843787,38.370129 2.29704142,39.3973871 C2.83952663,42.0182258 7.50035503,47.1012903 10.6572781,47.8585161 C10.8983432,47.9163548 11.1170414,47.9458065 11.3069822,47.9458065 C11.7990533,47.9458065 11.9822485,47.753129 12.0773964,47.608 C12.4622485,47.0193226 12.2439053,45.7390645 11.9385799,45.0414516 C11.064497,43.0447742 8.29455621,37.8101935 6.89467456,36.7336129 C6.18994083,36.1914194 5.4312426,35.9050645 4.70023669,35.9050645 L4.70023669,35.9050645 L4.70023669,35.9050645 L4.70023669,35.9050645 Z" id="sole-right-outline" fill="#000000"></path>
        <path d="M2.80118343,36.7808065 C2.26331361,37.4411613 2.0843787,38.370129 2.29704142,39.3973871 C2.83952663,42.0182258 7.50035503,47.1012903 10.6572781,47.8585161 C10.8983432,47.9163548 11.1170414,47.9458065 11.3069822,47.9458065 C11.7990533,47.9458065 11.9822485,47.753129 12.0773964,47.608 C12.4622485,47.0193226 12.2439053,45.7390645 11.9385799,45.0414516 C11.064497,43.0447742 8.29455621,37.8101935 6.89467456,36.7336129 C6.18994083,36.1914194 5.4312426,35.9050645 4.70023669,35.9050645 C3.93585799,35.9050645 3.26094675,36.2162581 2.80118343,36.7808065" id="sole-right" fill="#FFD200"></path>
        <path d="M11.303787,21.887871 L11.303787,21.887871 C10.1435503,21.887871 9.28473373,21.1526452 9.06248521,19.9689032 C8.91798817,19.1981935 9.19242604,18.3472903 9.83502959,17.5730323 C10.6697041,16.568129 11.9872189,15.8385806 12.9678107,15.8385806 C13.1886391,15.8385806 13.391716,15.8747742 13.5710059,15.9464516 C14.2231953,16.2072581 14.7110059,16.8413548 14.8757396,17.6425806 C15.0969231,18.7180968 14.7202367,19.8688387 13.8678107,20.7204516 C13.1257988,21.4624194 12.1910059,21.887871 11.303787,21.887871 L11.303787,21.887871 L11.303787,21.887871 L11.303787,21.887871 Z M12.9678107,16.9030968 C12.3944379,16.9030968 11.3471006,17.4190323 10.6547929,18.2529032 C10.4020118,18.5577097 9.99443787,19.1602258 10.1098225,19.7730323 C10.2727811,20.6409677 10.8489941,20.8233548 11.303787,20.8233548 C11.9016568,20.8233548 12.5786982,20.5036452 13.1147929,19.9674839 C13.7130178,19.3695806 13.9814201,18.5807742 13.8326627,17.8565484 C13.740355,17.4069677 13.4946746,17.0624194 13.175503,16.9350323 C13.1233136,16.9140968 13.0515976,16.9030968 12.9678107,16.9030968 L12.9678107,16.9030968 L12.9678107,16.9030968 L12.9678107,16.9030968 Z" id="hand-right-outline" fill="#000000"></path>
        <path d="M10.1098225,19.7730323 C10.2727811,20.6409677 10.8489941,20.8233548 11.303787,20.8233548 C11.9016568,20.8233548 12.5786982,20.5036452 13.1147929,19.9674839 C13.7130178,19.3695806 13.9814201,18.5807742 13.8326627,17.8565484 C13.740355,17.4069677 13.4946746,17.0624194 13.175503,16.9350323 C13.1233136,16.9140968 13.0515976,16.9030968 12.9678107,16.9030968 C12.3944379,16.9030968 11.3471006,17.4190323 10.6547929,18.2529032 C10.4020118,18.5577097 9.99443787,19.1602258 10.1098225,19.7730323" id="hand-right" fill="#FFD200"></path>
        <path d="M48.8911243,5.66854839 C46.7708876,5.66854839 43.7343195,5.65080645 41.8508876,5.49822581 C41.6868639,5.48509677 41.5420118,5.48509677 41.448284,5.49290323 C41.5871006,5.71964516 41.927574,6.11670968 42.4714793,6.56983871 L42.6085207,6.68587097 C46.308284,9.8386129 49.0931361,10.5007419 50.7777515,10.5010968 L50.7784615,10.5010968 C51.3802367,10.5010968 51.9624852,10.4177097 52.5102959,10.2534194 C55.1094675,9.47419355 56.7060355,7.86429032 57.3330178,6.61774194 C57.5669822,6.15183871 57.6145562,5.84596774 57.6145562,5.70225806 C57.2609467,5.66641935 56.3414201,5.64832258 54.8737278,5.64832258 C54.0926627,5.64832258 53.2043787,5.65258065 52.259645,5.65754839 C51.1849704,5.66287097 50.0368047,5.66854839 48.8911243,5.66854839" id="ear-left" fill="#FF8800"></path>
        <path d="M9.70153846,14.1215161 C9.65183432,14.1325161 9.63656805,14.1495484 9.63621302,14.1495484 C9.64118343,14.1477742 9.67278107,14.2073871 9.79065089,14.286871 C10.0065089,14.4327097 10.8862722,14.8425484 13.2685207,14.2063226 C13.1953846,13.6541935 13.2230769,12.9654516 13.4627219,12.1471935 C12.0706509,13.1148387 10.5007101,13.9440968 9.70153846,14.1215161" id="ear-right" fill="#FF8800"></path>
        <path d="M42.851716,48.0653871 C41.7869822,48.7012581 40.7439053,49.2072581 39.7430769,49.6032581 C36.4583432,55.6099677 29.3229586,60.2253548 23.1319527,60.3428065 C19.9342012,60.3953226 17.4568047,59.1902903 16.1108876,56.9281935 C14.6009467,54.3900323 12.2946746,53.4529032 10.7943195,53.8389677 C9.78887574,54.098 9.21266272,54.936129 9.17183432,56.1997097 C9.13597633,57.3082258 10.1151479,58.7871935 11.7908876,60.1561613 C14.8036686,62.6180323 19.9736095,64.5973226 24.7295858,63.4710645 C32.9513609,61.525129 40.3359763,55.1735161 42.851716,48.0653871" id="tail" fill="#FF8800"></path>
        <path d="M48.3742012,14.9628387 C47.7788166,13.2812581 47.0474556,11.7508387 46.200355,10.375129 C44.9272189,9.75522581 43.4953846,8.84045161 41.9172781,7.49596774 L41.7898225,7.3873871 C40.0448521,5.93467742 40.2855621,5.27077419 40.3643787,5.05254839 C40.427574,4.8776129 40.5397633,4.741 40.6945562,4.63880645 C38.3289941,3.12470968 35.6133728,2.27770968 32.6471006,2.18829032 C25.2756213,1.96509677 18.8151479,5.10009677 15.3617751,10.5741935 C14.4177515,12.0712581 14.0914793,13.4317097 14.4191716,14.5093548 C14.6577515,15.2942581 15.2052071,15.7782581 15.6014201,15.9542581 C16.272426,16.2530323 20.5416568,14.7719355 21.7821302,12.5176452 C21.8527811,12.3902581 21.972071,12.2965806 22.1130178,12.2596774 C22.2546746,12.2227742 22.404142,12.2447742 22.5280473,12.3210645 C25.4407101,14.1122903 28.7147929,13.2933226 31.5543195,12.3852903 C31.835503,12.2962258 32.1340828,12.4502258 32.2239053,12.7301935 C32.2718343,12.8806452 32.2476923,13.0357097 32.1734911,13.1620323 C34.0501775,13.1127097 35.9332544,13.3987097 37.5926627,14.0533871 C37.8660355,14.1612581 38.0002367,14.4703226 37.8923077,14.7439032 C37.7843787,15.0174839 37.4747929,15.1519677 37.2014201,15.0433871 C33.1185799,13.433129 27.5893491,14.2219355 24.6127811,16.8402903 C23.592071,17.7380323 23.1486391,18.6052581 23.364497,19.2819355 C23.5863905,19.9774194 24.491716,20.5245806 25.6182249,20.6427419 C26.4649704,20.7307419 27.7533728,20.4458065 29.1184615,20.1427742 C31.2220118,19.6761613 33.6071006,19.1470968 35.7298225,19.5863871 C39.1700592,20.2978387 41.4525444,22.3605161 44.9069822,25.4827419 L45.3280473,25.863129 C45.5460355,26.0600645 45.5630769,26.3968065 45.3660355,26.6146774 C45.2609467,26.7314194 45.1160947,26.7903226 44.9708876,26.7903226 C44.8501775,26.7903226 44.7308876,26.7463226 44.6321893,26.6643548 C44.9730178,28.1135161 45.1480473,29.6013548 45.1480473,31.1072903 C45.1480473,32.9127097 44.8973964,34.6964839 44.4074556,36.4142581 C44.9559763,36.7243871 45.4168047,37.0969677 45.7469822,37.5241935 C45.9269822,37.7566129 45.8840237,38.0912258 45.6514793,38.2704194 C45.4192899,38.4503226 45.083787,38.4077419 44.904497,38.1749677 C43.9846154,36.9851935 41.6417751,36.2918387 39.3273373,36.5249677 C37.6420118,36.6956452 34.5710059,37.5025484 32.8306509,40.9583226 C32.8970414,41.1357419 32.952071,41.3000323 32.9921893,41.4444516 C33.9046154,44.569871 33.6887574,46.466129 32.9989349,48.664 C32.9311243,49.0348065 32.7997633,49.4769355 32.6030769,49.9375161 C34.9466272,49.9442581 39.083432,49.4297419 43.4854438,46.4004839 C51.8201183,40.664871 51.0869822,22.6238065 48.3742012,14.9628387" id="left-body" fill="#FFD200"></path>
        <path d="M57.9994083,4.68812903 C57.7420118,4.62354839 57.1288757,4.58380645 54.8737278,4.58380645 C54.0912426,4.58380645 53.2011834,4.58806452 52.2543195,4.59303226 C51.1810651,4.59835484 50.0353846,4.60403226 48.8911243,4.60403226 C46.9306509,4.60403226 44.1823669,4.58877419 42.324497,4.46564516 C39.5708876,2.39445161 36.3021302,1.23341935 32.6790533,1.12377419 C24.9539645,0.887096774 18.1654438,4.18780645 14.5001183,9.94719355 C13.0902959,11.3378065 10.3807101,12.8799355 9.47076923,13.0825484 C9.04934911,13.175871 8.73159763,13.4586774 8.61940828,13.8383548 C8.50650888,14.2226452 8.62792899,14.643129 8.9435503,14.9628387 C9.23289941,15.2545161 9.83502959,15.6192903 11.039645,15.6192903 C11.687574,15.6192903 12.5126627,15.5114194 13.5543195,15.2325161 C13.9455621,16.1189032 14.6197633,16.6830968 15.1689941,16.9272258 C16.4811834,17.5095161 20.7450888,15.820129 22.4250888,13.488129 C23.7259172,14.1782903 25.0792899,14.4415806 26.4489941,14.4394516 C25.4992899,14.872 24.6330178,15.4042581 23.9091124,16.0411935 C22.1691124,17.5716129 22.1009467,18.8238387 22.3498225,19.6051935 C22.7030769,20.7144194 23.9428402,21.5369355 25.5067456,21.7015806 C26.5249704,21.8094516 27.8336095,21.5184839 29.3488757,21.1820968 C31.3484024,20.7389032 33.6149112,20.2364516 35.5139645,20.6289032 C38.3385799,21.2129677 40.3029586,22.7820645 43.152426,25.335129 C43.7698225,27.1909355 44.0829586,29.1326129 44.0829586,31.1072903 C44.0829586,32.7576452 43.8607101,34.3884839 43.427929,35.9618387 C42.2009467,35.5076452 40.7123077,35.3142581 39.2204734,35.4657742 C36.2744379,35.7641935 33.7970414,37.3105806 32.2895858,39.7493871 C31.1826036,37.5866452 29.0371598,34.7422581 26.6769231,34.7422581 C26.1014201,34.7422581 25.5539645,34.9125806 25.0505325,35.2482581 C22.4236686,36.9983226 23.1692308,40.1102581 23.8263905,42.8556452 C24.0028402,43.5919355 24.1693491,44.2874194 24.2691124,44.9357097 C24.3901775,45.7234516 24.3582249,46.6825806 24.3276923,47.6097742 C24.2666272,49.4464194 24.203432,51.3451613 25.2866272,52.4646774 C25.8511243,53.0480323 26.6605917,53.3439677 27.6926627,53.3439677 C29.8271006,53.3439677 31.2071006,52.2326129 32.0343195,50.9903226 C32.2228402,50.9974194 32.4223669,51.0023871 32.640355,51.0023871 C34.0139645,51.0023871 35.9502959,50.8302903 38.1791716,50.1507742 C34.8486391,55.3236129 28.583432,59.1746774 23.111716,59.2786452 C21.1494675,59.3212258 18.4899408,58.8439677 17.0261538,56.383871 C15.2485207,53.3957742 12.4111243,52.3223871 10.5287574,52.8081613 C9.04615385,53.1896129 8.16390533,54.4138065 8.10745562,56.1652903 C8.06023669,57.6243871 9.15727811,59.3794194 11.1166864,60.9800968 C13.6927811,63.0846452 17.7550296,64.8570645 21.8968047,64.8570645 C22.9249704,64.8570645 23.9584615,64.7477742 24.9752663,64.5071935 C34.008284,62.3685806 42.0770414,55.0926129 44.2491124,47.1612581 C49.1343195,43.6728387 50.6893491,36.7389355 51.1295858,31.5054194 C51.6905325,24.8337419 50.6542012,18.2110323 49.3782249,14.6076452 C48.9273373,13.334129 48.3976331,12.1475484 47.8057988,11.0386774 C48.9923077,11.4364516 49.991716,11.5656129 50.7777515,11.5656129 L50.7784615,11.5656129 C51.4839053,11.5656129 52.1691124,11.4669677 52.8163314,11.2732258 C56.9708876,10.0273871 58.7091124,6.95732258 58.6792899,5.66606452 C58.667574,5.15722581 58.4130178,4.7913871 57.9994083,4.68812903 L57.9994083,4.68812903 L57.9994083,4.68812903 L57.9994083,4.68812903 Z M13.2685207,14.2063226 C10.8862722,14.8425484 10.0065089,14.4327097 9.79065089,14.286871 C9.67278107,14.2073871 9.64118343,14.1477742 9.63621302,14.1495484 C9.63656805,14.1495484 9.65183432,14.1325161 9.70153846,14.1215161 C10.5007101,13.9440968 12.0706509,13.1148387 13.4627219,12.1471935 C13.2230769,12.9654516 13.1953846,13.6541935 13.2685207,14.2063226 L13.2685207,14.2063226 L13.2685207,14.2063226 L13.2685207,14.2063226 Z M31.6310059,48.281129 C31.6214201,48.3102258 31.6139645,48.3421613 31.6086391,48.3726774 C31.5827219,48.5174516 30.9390533,51.9246129 27.6926627,51.9246129 C27.0511243,51.9246129 26.5981065,51.7784194 26.3073373,51.477871 C25.6427219,50.7912581 25.6956213,49.1976774 25.7467456,47.6569677 C25.7797633,46.6648387 25.8142012,45.6382903 25.6725444,44.7196129 C25.5639053,44.0134839 25.3828402,43.2569677 25.2078107,42.5256452 C24.4995266,39.5687742 24.1611834,37.5469032 25.8379882,36.4291613 C26.1081657,36.2492581 26.3826036,36.1616129 26.6769231,36.1616129 C28.5919527,36.1616129 31.0991716,39.9356774 31.6263905,41.8333548 C32.4504142,44.6571613 32.2640237,46.2777097 31.6310059,48.281129 L31.6310059,48.281129 L31.6310059,48.281129 L31.6310059,48.281129 Z M24.7295858,63.4710645 C19.9736095,64.5973226 14.8036686,62.6180323 11.7908876,60.1561613 C10.1151479,58.7871935 9.13597633,57.3082258 9.17183432,56.1997097 C9.21266272,54.936129 9.78887574,54.098 10.7943195,53.8389677 C12.2946746,53.4529032 14.6009467,54.3900323 16.1108876,56.9281935 C17.4568047,59.1902903 19.9342012,60.3953226 23.1319527,60.3428065 C29.3229586,60.2253548 36.4583432,55.6099677 39.7430769,49.6032581 C40.7439053,49.2072581 41.7869822,48.7012581 42.851716,48.0653871 C40.3359763,55.1735161 32.9513609,61.525129 24.7295858,63.4710645 L24.7295858,63.4710645 L24.7295858,63.4710645 L24.7295858,63.4710645 Z M48.3742012,14.9628387 C51.0869822,22.6238065 51.8201183,40.664871 43.4854438,46.4004839 C39.083432,49.4297419 34.9466272,49.9442581 32.6030769,49.9375161 C32.7997633,49.4769355 32.9311243,49.0348065 32.9989349,48.664 C33.6887574,46.466129 33.9046154,44.569871 32.9921893,41.4444516 C32.952071,41.3000323 32.8970414,41.1357419 32.8306509,40.9583226 C34.5710059,37.5025484 37.6420118,36.6956452 39.3273373,36.5249677 C41.6417751,36.2918387 43.9846154,36.9851935 44.904497,38.1749677 C45.083787,38.4077419 45.4192899,38.4503226 45.6514793,38.2704194 C45.8840237,38.0912258 45.9269822,37.7566129 45.7469822,37.5241935 C45.4168047,37.0969677 44.9559763,36.7243871 44.4074556,36.4142581 C44.8973964,34.6964839 45.1480473,32.9127097 45.1480473,31.1072903 C45.1480473,29.6013548 44.9730178,28.1135161 44.6321893,26.6643548 C44.7308876,26.7463226 44.8501775,26.7903226 44.9708876,26.7903226 C45.1160947,26.7903226 45.2609467,26.7314194 45.3660355,26.6146774 C45.5630769,26.3968065 45.5460355,26.0600645 45.3280473,25.863129 L44.9069822,25.4827419 C41.4525444,22.3605161 39.1700592,20.2978387 35.7298225,19.5863871 C33.6071006,19.1470968 31.2220118,19.6761613 29.1184615,20.1427742 C27.7533728,20.4458065 26.4649704,20.7307419 25.6182249,20.6427419 C24.491716,20.5245806 23.5863905,19.9774194 23.364497,19.2819355 C23.1486391,18.6052581 23.592071,17.7380323 24.6127811,16.8402903 C27.5893491,14.2219355 33.1185799,13.433129 37.2014201,15.0433871 C37.4747929,15.1519677 37.7843787,15.0174839 37.8923077,14.7439032 C38.0002367,14.4703226 37.8660355,14.1612581 37.5926627,14.0533871 C35.9332544,13.3987097 34.0501775,13.1127097 32.1734911,13.1620323 C32.2476923,13.0357097 32.2718343,12.8806452 32.2239053,12.7301935 C32.1340828,12.4502258 31.835503,12.2962258 31.5543195,12.3852903 C28.7147929,13.2933226 25.4407101,14.1122903 22.5280473,12.3210645 C22.404142,12.2447742 22.2546746,12.2227742 22.1130178,12.2596774 C21.972071,12.2965806 21.8527811,12.3902581 21.7821302,12.5176452 C20.5416568,14.7719355 16.272426,16.2530323 15.6014201,15.9542581 C15.2052071,15.7782581 14.6577515,15.2942581 14.4191716,14.5093548 C14.0914793,13.4317097 14.4177515,12.0712581 15.3617751,10.5741935 C18.8151479,5.10009677 25.2756213,1.96509677 32.6471006,2.18829032 C35.6133728,2.27770968 38.3289941,3.12470968 40.6945562,4.63880645 C40.5397633,4.741 40.427574,4.8776129 40.3643787,5.05254839 C40.2855621,5.27077419 40.0448521,5.93467742 41.7898225,7.3873871 L41.9172781,7.49596774 C43.4953846,8.84045161 44.9272189,9.75522581 46.200355,10.375129 C47.0474556,11.7508387 47.7788166,13.2812581 48.3742012,14.9628387 L48.3742012,14.9628387 L48.3742012,14.9628387 L48.3742012,14.9628387 Z M57.3330178,6.61774194 C56.7060355,7.86429032 55.1094675,9.47419355 52.5102959,10.2534194 C51.9624852,10.4177097 51.3802367,10.5010968 50.7784615,10.5010968 L50.7777515,10.5010968 C49.0931361,10.5007419 46.308284,9.8386129 42.6085207,6.68587097 L42.4714793,6.56983871 C41.927574,6.11670968 41.5871006,5.71964516 41.448284,5.49290323 C41.5420118,5.48509677 41.6868639,5.48509677 41.8508876,5.49822581 C43.7343195,5.65080645 46.7708876,5.66854839 48.8911243,5.66854839 C50.0368047,5.66854839 51.1849704,5.66287097 52.259645,5.65754839 C53.2043787,5.65258065 54.0926627,5.64832258 54.8737278,5.64832258 C56.3414201,5.64832258 57.2609467,5.66641935 57.6145562,5.70225806 C57.6145562,5.84596774 57.5669822,6.15183871 57.3330178,6.61774194 L57.3330178,6.61774194 L57.3330178,6.61774194 L57.3330178,6.61774194 Z" id="left-body-outline" fill="#000000"></path>
        <path d="M21.3021302,9.69880645 C20.4553846,10.3336129 20.7106509,11.1185161 21.6571598,11.2366774 C22.6040237,11.3548387 22.6778698,11.4176452 23.5508876,10.7633226 C24.4973964,10.0536452 24.6159763,8.8706129 23.5508876,8.98912903 C22.4857988,9.10764516 21.7757396,9.34396774 21.3021302,9.69880645" id="nose" fill="#000000"></path>
        <path d="M18.8169231,10.1721613 C18.8169231,10.760129 18.3401183,11.2366774 17.7518343,11.2366774 C17.1639053,11.2366774 16.6867456,10.760129 16.6867456,10.1721613 C16.6867456,9.58419355 17.1639053,9.10764516 17.7518343,9.10764516 C18.3401183,9.10764516 18.8169231,9.58419355 18.8169231,10.1721613" id="eye-left" fill="#000000"></path>
        <path d="M31.1247337,7.21529032 C31.1247337,7.80325806 30.647929,8.27980645 30.059645,8.27980645 C29.4713609,8.27980645 28.9945562,7.80325806 28.9945562,7.21529032 C28.9945562,6.62732258 29.4713609,6.15077419 30.059645,6.15077419 C30.647929,6.15077419 31.1247337,6.62732258 31.1247337,7.21529032" id="eye-right" fill="#000000"></path>
    </g>
</svg>

基本 path のみで作成されている SVG 画像です。とても横長なコードなのでわかりにくいですが、横スクロールすると fill="#FF8800" など出てきます。この fill 属性が色を指定している部分です。

つまり fill 値を変更すれば色が変更できるということになります。

試しに色 fill 値を変更したわぷーです。

わぷーの path は17個のパーツに分かれています。

17個では色を塗り分ける場合多いので、以下の10個の区分にしてしまいます。

色を変更する input 要素

上記の SVG の fill 値を JavaScript で変更できるようにしたいので、色の設定をできる要素を input で作ります。

10種類の input 要素を用意し、type を color にします。こうすることでブラウザによりますが OS のカラーパレットがでて色を簡単に決めることができます。

HTML

<form id="wapuuColor">
    <label>アウトライン
        <input id="canvas-all-outline" type="color" value="#000000">
    </label>
    <label>ボールの影
        <input id="canvas-WordPress-blue2" type="color" value="#999999">
    </label>
    <label>ボールの明
        <input id="canvas-WordPress-blue1" type="color" value="#ffffff">
    </label>
    <label>WordPressロゴ
        <input id="canvas-WordPress-logo" type="color" value="#000000">
    </label>
    <label>足の裏
        <input id="canvas-sole" type="color" value="#ffffff">
    </label>
    <label>耳
        <input id="canvas-ear" type="color" value="#ffffff">
    </label>
    <label>尻尾
        <input id="canvas-tail" type="color" value="#ffffff">
    </label>
    <label>体
        <input id="canvas-body" type="color" value="#ffffff">
    </label>
    <label>鼻
        <input id="canvas-nose" type="color" value="#000000">
    </label>
    <label>目
        <input id="canvas-eye" type="color" value="#000000">
    </label>
</form>

上の input 要素の値を以下のように JavaScript で取得出来るようにしておきます。この form に変更が加えられたら再び canvas の再描画を行うようにしておけば色の変更がすぐに反映されます。

JavaScript

var d = document;
var outline = d.getElementById("canvas-all-outline").value;
var wpBlue2 = d.getElementById("canvas-WordPress-blue2").value;
var wpBlue1 = d.getElementById("canvas-WordPress-blue1").value;
var wpLogo = d.getElementById("canvas-WordPress-logo").value;
var sole = d.getElementById("canvas-sole").value;
var ear = d.getElementById("canvas-ear").value;
var tail = d.getElementById("canvas-tail").value;
var wapuuBody = d.getElementById("canvas-body").value;
var nose = d.getElementById("canvas-nose").value;
var eye = d.getElementById("canvas-eye").value;

SVG を canvas に書きだす

わぷーの SVG は準備できたので、canvas にどうやって書きだすかです。以下のページを参考に SVG として書き出すことが出来ました。

参考：SVGをCavnasで利用する方法

要は base64 にしてあげた SVG をソースとする img を直接 canvas に埋め込むことができれば大丈夫です。

この方法は firefox だけ出来ないという情報もあったのですが、今現在は出来るようです。

参考：SVGをcanvasで使う

firefox でも問題なく出来たので今回は直接埋め込む形でいきます。もし SVG の埋め込みで上手くいかなければ上記のリンクのライブラリは便利そうです。

canvas を PNG として書き出す

canvas に SVG を埋め込むことが出来たので、次にそれを通常の画像形式、ここでは PNG で書き出すことにします。

PNG で書き出すことにより画像とし簡単に保存でき、扱いやすくなると考えられます。

参考：canvasを画像に変換する

canvas を base64 データに変換して画像のソースとして指定してあげれば OK ということになります。

ダウンロードリンクのようなボタンを作りダウンロードさせることも可能なのですが、今現在ブラウザの対応がまちまちなので、画像を直接右クリックで保存できるようにします。少しカッコ悪いのですが安全策でいきます。

注意事項

IE のみ SVG を描画した canvas の 画像書き出しに対応していないようです。

参考：canvas.toDataURL() gives “Security Error” in IE 11

9日当日に気が付きました。すみません。IE で画像を保存したい場合は申し訳ないのですがスクショ等で保存してください。IE も対応したい場合は firefox について云々記述のところで紹介している「cansvg」を使えば PNG の書き出しが可能です。

Edge などほかにブラウザでは問題なく動いています。IEめ。

また、SVG の画像に関しては大きめで用意しておいた方が楽です。わぷーの SVG は 60×66 と小さ目で SVG なので拡大しても荒れることはないのですが、canvas に描画する際、一部ブラウザで拡大が効かない問題が発生しました。その際、無理やり拡大させると画像があれるため、縮小をしてレスポンシブ対応をしたいです。そのため、わぷーの SVG の原寸を 400×440 まで拡大しています。原寸自体を大きな画像にするところがポイントです。

コードのフロー

以下のような流れになるよう JavaScript コードを書いていくことにします。

各 input 要素のカラーコードを取得

インラインのわぷー SVG コードの各 fill 値に上記のカラーコードを挿入

わぷー SVG コードを base64 変換して canvas に張り付ける

わぷーが写っている canvas を PNG の base64 データに変換する

img 要素の src として先の base64 データを挿入

ここまでを1つの関数とし、input 要素に変更が加えられるたびに、この関数を再び発火する

わぷーの塗り絵

わぷーの塗り絵です。色の入ったマス、input 要素をクリックすることでカラフルに色を変更可能です。

画像を保存する際は下の canvas 経由で書き出した PNG 画像を右クリックで保存してください。IE は画像が表示されません。

こんな感じで自由に色を変更可能です。

コード概要

コードをまとめたものです。

HTML

<canvas id="canvas"></canvas>

<form id="wapuuColor">
<label>アウトライン
    <input id="canvas-all-outline" type="color" value="#000000">
</label>
<label>ボールの影
    <input id="canvas-WordPress-blue2" type="color" value="#999999">
</label>
<label>ボールの明
    <input id="canvas-WordPress-blue1" type="color" value="#ffffff">
</label>
<label>WordPressロゴ
    <input id="canvas-WordPress-logo" type="color" value="#000000">
</label>
<label>足の裏
    <input id="canvas-sole" type="color" value="#ffffff">
</label>
<label>耳
    <input id="canvas-ear" type="color" value="#ffffff">
</label>
<label>尻尾
    <input id="canvas-tail" type="color" value="#ffffff">
</label>
<label>体
    <input id="canvas-body" type="color" value="#ffffff">
</label>
<label>鼻
    <input id="canvas-nose" type="color" value="#000000">
</label>
<label>目
    <input id="canvas-eye" type="color" value="#000000">
</label>
</form>

スマホのことも考えてレスポンシブ対応をしています。画面が狭くなった場合、canvas 自体の大きさと、SVG の大きさをそれに合わせて変更してあげれば、はみ出るということが防げます。

canvas の描画に関するレスポンシブ対応は以下のページを参考にしました。scale という変数をおいて描画自体を拡大縮小させています。

参考：Canvasのレスポンシブ対応

JavaScript

// レスポンシブ対応 表示領域の幅(ここでは #content)を取得してその幅で場合分け
var blogContentAreaWidth = document.getElementById("content").clientWidth;
if (blogContentAreaWidth > 400) {
    document.getElementById("canvas").width = 400;
    document.getElementById("canvas").height = 440;
} else {
    document.getElementById("canvas").width = blogContentAreaWidth;
    document.getElementById("canvas").height = blogContentAreaWidth * 1.1;
}

// わぷー塗り絵関数
function wapuuNurie () {

    //各 input 要素に設定されている色コードを取得
    var d = document;
    var outline = d.getElementById("canvas-all-outline").value;
    var wpBlue2 = d.getElementById("canvas-WordPress-blue2").value;
    var wpBlue1 = d.getElementById("canvas-WordPress-blue1").value;
    var wpLogo = d.getElementById("canvas-WordPress-logo").value;
    var sole = d.getElementById("canvas-sole").value;
    var ear = d.getElementById("canvas-ear").value;
    var tail = d.getElementById("canvas-tail").value;
    var wapuuBody = d.getElementById("canvas-body").value;
    var nose = d.getElementById("canvas-nose").value;
    var eye = d.getElementById("canvas-eye").value;

    //canvas に入れるための SVG の生成 各色コードを要素の属性として付ける。原寸を拡大してあります。
    var svg = '<svg width="400" height="440" viewBox="-0.249 -0.5 400 440" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
    <title>wapuu</title>
    <desc>Created with Sketch.</desc>
    <g id="wapuu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M388.57,24.094c-2.465-0.613-6.483-0.91-22.652-0.91c-5.224,0-11.159,0.029-17.467,0.062
	c-7.122,0.036-14.728,0.072-22.319,0.072c-12.203,0-29.292-0.088-41.45-0.783C265.206,8.382,242.775,0.829,217.952,0.082
	C164.155-1.565,116.525,21.678,90.733,61.637c-8.717,8.284-25.115,17.497-29.55,18.478c-7.432,1.653-12.249,8.163-11.447,15.471
	c0.581,5.273,4.328,11.196,12.696,13.948c-0.965,0.949-1.888,1.943-2.743,2.974c-5.668,6.829-8.042,14.59-6.679,21.86
	c0.277,1.454,0.659,2.85,1.145,4.174c-12.265,20.865-18.716,44.551-18.716,68.902c0,6.15,0.414,12.269,1.236,18.328
	c-1.927-0.333-3.868-0.502-5.808-0.502c-9.327,0-17.976,4.044-23.719,11.088c-6.343,7.788-8.567,18.21-6.261,29.338
	c4.693,22.665,39.049,60.88,66.446,67.454c2.701,0.646,5.277,0.979,7.661,0.979c7.328,0,13.381-3.092,17.05-8.701
	c1.164-1.78,2.005-3.665,2.589-5.603c18.696,12.882,40.312,20.865,63.208,23.188c4.96,16.175,18.279,18.875,26.592,18.875
	c12.53,0,23.35-5.094,31.073-14.479c0.691,0.013,1.396,0.02,2.101,0.02c5.296,0,11.877-0.365,19.41-1.526
	c-24.106,27.035-58.933,42.598-84.576,42.598h-0.006c-10.808,0-25.327-2.752-33.127-15.869
	c-10.322-17.355-26.869-28.131-43.178-28.131c-17.131,0-29.034,12.086-29.615,30.081c-0.316,9.731,4.788,20.324,14.764,30.616
	C78.06,422.52,110.6,440,145.475,440c7.706,0,15.259-0.861,22.447-2.563c61.803-14.63,117.178-64.082,133.288-118.479
	c58.988-45.044,54.312-168.875,34.764-224.086c-1.356-3.832-2.817-7.585-4.396-11.251c2.381,0.277,4.735,0.414,7.044,0.414
	c5.407,0,10.671-0.76,15.653-2.253c30.662-9.193,44.509-31.94,44.222-44.424C398.348,30.77,394.454,25.562,388.57,24.094" id="all-outline" fill="' + outline +'"></path>
            <path d="M287.683,168.891c-19.032-17.049-32.149-27.531-51.012-31.431
	c-12.686-2.622-27.818,0.734-41.179,3.695c-10.119,2.247-18.859,4.191-25.659,3.47c-10.446-1.099-18.726-6.594-21.087-14
	c-1.66-5.221-1.207-13.583,10.416-23.807c4.833-4.252,10.622-7.807,16.965-10.697c-9.151,0.013-18.188-1.745-26.875-6.353
	c-11.222,15.575-39.702,26.859-48.464,22.968c-1.947-0.864-4.122-2.348-6.128-4.419c-0.192,0.147-0.365,0.31-0.558,0.46
	c2.312,2.162,3.998,5.195,4.729,8.737c1.474,7.185-1.04,14.868-6.734,20.559c-4.954,4.954-11.199,7.794-17.125,7.794
	c-4.145,0-7.683-1.441-10.334-3.956C52.916,160.992,46.11,183.41,46.11,207.445c0,11.189,1.497,22.026,4.243,32.351
	c11.767,9.692,31.148,48.2,35.374,57.859c0.232,0.528,0.493,1.2,0.76,1.97c20.167,18.642,46.442,30.773,75.503,33.017
	c-0.365-4.801-0.202-9.927-0.033-14.976c0.206-6.196,0.417-12.601-0.391-17.864c-0.666-4.324-1.777-8.975-2.958-13.893
	c-4.386-18.335-9.366-39.121,8.179-50.81c3.362-2.237,7.018-3.379,10.859-3.379c15.765,0,30.098,19,37.487,33.44
	c10.064-16.286,26.618-26.611,46.289-28.607c9.967-1.011,19.906,0.28,28.099,3.313c2.896-10.508,4.383-21.4,4.383-32.422
	C293.904,194.256,291.812,181.287,287.683,168.891" id="WordPress-blue2" fill="' + wpBlue2 + '"></path>
            <path d="M206.048,138.908c-3.587,0.704-7.128,1.487-10.556,2.247
	c-10.119,2.247-18.859,4.191-25.659,3.47c-10.446-1.099-18.726-6.594-21.087-14c-1.66-5.221-1.207-13.583,10.416-23.807
	c0.167-0.146,0.359-0.277,0.525-0.424c-7.481-2.439-15.36-3.998-23.517-4.549c-12.892,8.704-29.139,13.661-35.384,10.892
	c-1.944-0.864-4.116-2.345-6.122-4.412c-0.186,0.153-0.372,0.307-0.561,0.453c2.312,2.166,3.995,5.195,4.725,8.737
	c1.474,7.185-1.04,14.868-6.734,20.559c-4.954,4.954-11.199,7.794-17.125,7.794c-4.148,0-7.687-1.441-10.338-3.962
	C52.913,160.986,46.11,183.41,46.11,207.445c0,11.179,1.471,22.019,4.223,32.332c7.892,6.483,19.212,25.945,27.094,40.999
	c15.053,9.575,32.905,15.146,52.075,15.146c10.592,0,20.777-1.709,30.322-4.84c-0.388-1.696-0.792-3.404-1.216-5.172
	c-4.386-18.335-9.366-39.121,8.179-50.81c3.362-2.237,7.018-3.379,10.859-3.379c12.125,0,23.383,11.238,31.311,22.991
	c11.173-15.823,17.768-35.113,17.768-55.955C226.725,176.167,218.988,155.402,206.048,138.908" id="WordPress-blue1" fill="' + wpBlue1 + '"></path>
            <path d="M121.13,273.334c-5.384,0.346-9.768,0.039-15.119-1.07
	c-1.614-16.084-2.654-36.18,5.453-71.201c14.728,38.127,30.949,66.081,31.063,66.238C139.771,268.611,131.38,272.609,121.13,273.334
	 M96.43,269.271c-42.138-19.137-49.874-64.506-35.733-99.434C61.235,204.402,70.921,231.35,96.43,269.271 M153.468,260.739
	c6.686-28.79,17.796-56.314,24.335-85.15c1.259-5.573,2.354-14.248,0.388-23.921C197.667,182.076,195.43,229.301,153.468,260.739
	 M66.623,158.25c19.023-29.259,55.398-53.06,95.325-23.833c-0.268-0.013-25.594,1.148-7.188,28.366
	c9.95,14.708,10.583,26.507,2.713,50.503c-2.841,11.828-3.698,15.403-6.236,27.586c-12.147-29.021-22.062-53.725-29.892-85.316
	c6.884-1.007,14.682-2.152,10.674-6.581c-0.502-0.558-36.764,3.04-37.109,3.098c-2.785,0.473-3.274,3.747-3.277,3.78
	c-0.29,2.586,0.179,2.56,8.036,2.087c2.071,11.15,3.013,16.244,8.137,32.524c-3.698,15.363-7.527,31.252-8.049,55.854
	c-16.524-32.87-23.138-55.698-24.397-84.237c2.345-1.425,5.476-0.868,7.55-2.987c1.412-1.448,2.1-4.712,0.339-5.094
	C77,152.657,72.232,157.079,66.623,158.25 M124.036,115.003c-62.511,5.156-103.103,99.303-47.816,148.566
	c56.031,49.936,125.256-14.584,122.866-74.439C197.23,142.72,158.784,113.333,124.036,115.003" id="WordPress-logo" fill="' + wpLogo + '"></path>
            <path d="M211.951,283.711c-0.039-0.144-0.072-0.287-0.111-0.443
	c-0.339-1.344-0.717-2.739-1.135-4.188c-3.521-12.673-20.268-37.882-33.059-37.882c-1.963,0-3.796,0.587-5.603,1.787
	c-11.199,7.468-8.939,20.976-4.207,40.719c1.167,4.886,2.377,9.94,3.102,14.656c0.946,6.131,0.717,12.992,0.496,19.619
	c-0.339,10.292-0.695,20.93,3.744,25.516c1.944,2.009,4.97,2.987,9.255,2.987c1.239,0,2.407-0.092,3.535-0.235
	c0.342-0.039,0.668-0.104,1.001-0.163c0.786-0.124,1.545-0.28,2.279-0.476c0.326-0.078,0.649-0.17,0.965-0.268
	c0.763-0.229,1.494-0.502,2.195-0.796c0.206-0.085,0.424-0.163,0.626-0.254c0.9-0.405,1.761-0.861,2.567-1.357
	c0.078-0.052,0.15-0.104,0.228-0.156c0.714-0.456,1.386-0.939,2.025-1.448c0.186-0.149,0.365-0.3,0.548-0.456
	c0.521-0.443,1.023-0.9,1.497-1.376c0.159-0.163,0.322-0.32,0.476-0.477c0.528-0.561,1.037-1.135,1.507-1.722
	c0.053-0.065,0.117-0.131,0.17-0.196c0.521-0.665,1.004-1.343,1.447-2.021c0.104-0.156,0.202-0.313,0.301-0.47
	c0.319-0.509,0.626-1.004,0.899-1.507c0.138-0.241,0.262-0.476,0.392-0.711c0.222-0.411,0.424-0.821,0.62-1.226
	c0.123-0.248,0.247-0.509,0.358-0.757c0.163-0.353,0.3-0.691,0.443-1.037c0.3-0.711,0.574-1.402,0.796-2.042
	c0.013-0.032,0.026-0.064,0.039-0.104c0.156-0.457,0.3-0.888,0.417-1.285c0.542-1.755,0.783-2.98,0.822-3.189
	c0.032-0.196,0.085-0.418,0.144-0.606c3.562-11.245,4.983-20.709,2.087-34.628C212.57,286.287,212.271,285.016,211.951,283.711" id="sole-left" fill="' + sole + '"></path>
            <path d="M74.994,327.02L74.994,327.02c-1.826,0-3.845-0.261-6-0.783
	c-24.055-5.771-56.979-41.873-61.144-61.981c-1.862-8.995-0.15-17.311,4.813-23.409c4.39-5.381,11.023-8.466,18.204-8.466
	c6.463,0,13.032,2.426,18.996,7.005c11.711,9.008,31.578,48.475,35.863,58.271c1.784,4.07,5.326,16.307,0.365,23.886
	C84.458,324.039,81.204,327.02,74.994,327.02L74.994,327.02L74.994,327.02L74.994,327.02z M30.867,239.489
	c-5.104,0-9.614,2.074-12.683,5.844c-3.594,4.416-4.788,10.618-3.369,17.48c3.623,17.506,34.754,51.455,55.838,56.51
	c1.611,0.391,3.072,0.587,4.34,0.587c3.284,0,4.51-1.292,5.143-2.257c2.573-3.933,1.115-12.484-0.926-17.141
	c-5.837-13.339-24.338-48.305-33.688-55.492C40.817,241.4,35.749,239.489,30.867,239.489L30.867,239.489L30.867,239.489
	L30.867,239.489z" id="sole-right-outline" fill="' + outline + '"></path>
            <path d="M18.185,245.333c-3.594,4.416-4.788,10.618-3.369,17.48
	c3.623,17.506,34.754,51.455,55.838,56.51c1.611,0.391,3.072,0.587,4.34,0.587c3.284,0,4.51-1.292,5.143-2.257
	c2.573-3.933,1.115-12.484-0.926-17.141c-5.837-13.339-24.338-48.305-33.688-55.492c-4.706-3.62-9.774-5.531-14.656-5.531
	C25.763,239.489,21.253,241.563,18.185,245.333" id="sole-right" fill="' + sole + '"></path>
            <path d="M74.971,145.867L74.971,145.867c-7.749,0-13.485-4.908-14.969-12.816
	c-0.965-5.146,0.868-10.83,5.159-16c5.577-6.711,14.375-11.587,20.924-11.587c1.474,0,2.831,0.245,4.028,0.721
	c4.357,1.742,7.615,5.978,8.717,11.33c1.474,7.185-1.04,14.868-6.734,20.559C87.142,143.026,80.897,145.867,74.971,145.867
	L74.971,145.867L74.971,145.867L74.971,145.867z M86.085,112.577c-3.829,0-10.824,3.444-15.448,9.014
	c-1.689,2.035-4.409,6.059-3.64,10.152c1.089,5.798,4.938,7.015,7.974,7.015c3.995,0,8.515-2.133,12.096-5.717
	c3.995-3.992,5.789-9.262,4.794-14.098c-0.617-3-2.257-5.303-4.39-6.154C87.126,112.648,86.646,112.577,86.085,112.577
	L86.085,112.577L86.085,112.577L86.085,112.577z" id="hand-right-outline" fill="' + outline + '"></path>
            <path d="M66.998,131.743c1.089,5.798,4.938,7.015,7.974,7.015c3.995,0,8.515-2.133,12.096-5.717
	c3.995-3.992,5.789-9.262,4.794-14.098c-0.617-3-2.257-5.303-4.39-6.154c-0.346-0.14-0.825-0.212-1.386-0.212
	c-3.829,0-10.824,3.444-15.448,9.014C68.948,123.625,66.228,127.65,66.998,131.743" id="hand-right" fill="' + wapuuBody + '"></path>
            <path d="M326.015,37.54c-14.16,0-34.445-0.117-47.021-1.138c-1.096-0.085-2.061-0.085-2.687-0.033
	c0.926,1.513,3.195,4.165,6.835,7.191l0.913,0.776c24.707,21.057,43.309,25.479,54.56,25.479h0.007
	c4.018,0,7.905-0.554,11.564-1.653c17.355-5.205,28.026-15.957,32.214-24.283c1.559-3.111,1.878-5.156,1.878-6.115
	c-2.36-0.238-8.505-0.359-18.308-0.359c-5.212,0-11.147,0.026-17.461,0.062C341.335,37.504,333.665,37.54,326.015,37.54" id="ear-left" fill="' + ear + '"></path>
            <path d="M64.271,93.998c-0.333,0.072-0.434,0.186-0.437,0.186c0.033-0.01,0.245,0.388,1.03,0.919
	c1.442,0.972,7.318,3.711,23.229-0.541c-0.489-3.685-0.303-8.287,1.298-13.75C80.095,87.273,69.607,92.814,64.271,93.998" id="ear-right" fill="' + ear + '"></path>
            <path d="M285.674,320.706c-7.109,4.246-14.075,7.624-20.755,10.272
	c-21.941,40.119-69.6,70.943-110.949,71.727c-21.357,0.353-37.901-7.696-46.893-22.803c-10.083-16.958-25.486-23.213-35.508-20.637
	c-6.715,1.735-10.563,7.331-10.837,15.771c-0.241,7.396,6.301,17.277,17.493,26.422c20.122,16.443,54.651,29.657,86.415,22.144
	C219.55,410.604,268.872,368.176,285.674,320.706" id="tail" fill="' + tail + '"></path>
            <path d="M322.564,99.617c-3.979-11.231-8.864-21.452-14.52-30.642
	c-8.505-4.139-18.066-10.25-28.606-19.228l-0.849-0.727c-11.662-9.702-10.051-14.137-9.522-15.592
	c0.418-1.171,1.168-2.081,2.205-2.766c-15.798-10.113-33.942-15.768-53.751-16.365c-49.234-1.494-92.383,19.447-115.446,56.008
	c-6.304,9.999-8.486,19.084-6.297,26.282c1.595,5.244,5.25,8.476,7.898,9.65c4.481,1.996,32.994-7.895,41.28-22.952
	c0.47-0.851,1.269-1.477,2.208-1.722c0.949-0.248,1.947-0.101,2.772,0.411c19.456,11.962,41.322,6.493,60.286,0.427
	c1.879-0.593,3.874,0.434,4.475,2.302c0.319,1.008,0.156,2.042-0.34,2.886c12.536-0.329,25.111,1.579,36.199,5.952
	c1.827,0.721,2.714,2.785,1.996,4.615c-0.718,1.826-2.791,2.723-4.618,1.999c-27.263-10.755-64.193-5.489-84.073,12.001
	c-6.816,5.998-9.781,11.79-8.339,16.306c1.484,4.647,7.53,8.3,15.053,9.089c5.655,0.587,14.261-1.314,23.38-3.339
	c14.049-3.114,29.977-6.649,44.156-3.714c22.972,4.751,38.221,18.527,61.297,39.382l2.805,2.541
	c1.461,1.314,1.572,3.564,0.262,5.019c-0.705,0.779-1.67,1.174-2.648,1.174c-0.803,0-1.598-0.296-2.257-0.841
	c2.276,9.676,3.443,19.616,3.443,29.674c0,12.057-1.669,23.969-4.943,35.443c3.665,2.073,6.744,4.559,8.948,7.415
	c1.2,1.553,0.913,3.783-0.639,4.983c-1.553,1.2-3.796,0.913-4.996-0.639c-6.145-7.944-21.785-12.575-37.243-11.023
	c-11.258,1.148-31.771,6.536-43.394,29.612c0.443,1.187,0.815,2.282,1.076,3.248c6.099,20.871,4.657,33.538,0.053,48.22
	c-0.457,2.472-1.331,5.433-2.648,8.505c15.654,0.046,43.282-3.392,72.686-23.624C345.575,271.279,340.684,150.785,322.564,99.617" id="left-body" fill="' + wapuuBody + '"></path>
            <path d="M386.849,30.992c-1.722-0.431-5.818-0.695-20.878-0.695c-5.225,0-11.173,0.026-17.493,0.059
	c-7.168,0.036-14.825,0.075-22.463,0.075c-13.091,0-31.451-0.101-43.856-0.923c-18.394-13.834-40.224-21.589-64.422-22.32
	c-51.595-1.582-96.936,20.464-121.417,58.93c-9.415,9.288-27.512,19.587-33.59,20.94c-2.814,0.623-4.938,2.511-5.685,5.048
	c-0.756,2.566,0.056,5.374,2.163,7.51c1.934,1.947,5.955,4.383,14,4.383c4.328,0,9.839-0.721,16.795-2.583
	c2.615,5.922,7.116,9.689,10.785,11.319c8.763,3.891,37.243-7.393,48.464-22.968c8.688,4.608,17.725,6.366,26.875,6.353
	c-6.343,2.89-12.132,6.444-16.965,10.697c-11.623,10.224-12.076,18.585-10.416,23.807c2.361,7.406,10.641,12.901,21.087,14
	c6.799,0.721,15.54-1.223,25.659-3.47c13.361-2.961,28.494-6.317,41.179-3.695c18.862,3.9,31.979,14.382,51.012,31.431
	c4.129,12.396,6.222,25.366,6.222,38.554c0,11.022-1.486,21.915-4.383,32.422c-8.192-3.033-18.132-4.324-28.099-3.313
	c-19.671,1.996-36.225,12.321-46.289,28.607c-7.39-14.44-21.723-33.44-37.487-33.44c-3.841,0-7.497,1.142-10.859,3.379
	c-17.545,11.688-12.565,32.475-8.179,50.81c1.181,4.918,2.292,9.568,2.958,13.893c0.809,5.264,0.597,11.668,0.391,17.864
	c-0.408,12.263-0.828,24.941,6.405,32.423c3.77,3.894,9.177,5.87,16.071,5.87c14.255,0,23.467-7.422,28.999-15.719
	c1.252,0.046,2.59,0.085,4.044,0.085c9.177,0,22.11-1.154,36.995-5.688c-22.241,34.542-64.089,60.267-100.634,60.958
	c-13.107,0.287-30.871-2.902-40.645-19.332c-11.874-19.959-30.825-27.127-43.396-23.886c-9.901,2.551-15.794,10.729-16.172,22.425
	c-0.316,9.744,7.012,21.472,20.099,32.155c17.206,14.062,44.336,25.894,72,25.894c6.865,0,13.769-0.724,20.559-2.335
	c60.332-14.284,114.227-62.876,128.732-115.851c32.625-23.298,43.009-69.606,45.95-104.563c3.75-44.558-3.177-88.792-11.695-112.86
	c-3.013-8.505-6.548-16.43-10.501-23.836c7.919,2.658,14.598,3.519,19.848,3.519h0.007c4.709,0,9.288-0.659,13.605-1.95
	c27.746-8.322,39.356-28.826,39.16-37.452C391.31,34.125,389.614,31.683,386.849,30.992L386.849,30.992L386.849,30.992
	L386.849,30.992z M88.094,94.562c-15.911,4.252-21.788,1.513-23.229,0.541c-0.786-0.531-0.998-0.929-1.03-0.919
	c0.003,0,0.104-0.114,0.437-0.186c5.335-1.184,15.823-6.725,25.121-13.185C87.791,86.275,87.605,90.877,88.094,94.562L88.094,94.562
	L88.094,94.562L88.094,94.562z M210.731,322.147c-0.059,0.188-0.111,0.41-0.144,0.606c-0.176,0.972-4.475,23.729-26.155,23.729
	c-4.285,0-7.312-0.979-9.255-2.987c-4.438-4.586-4.083-15.224-3.744-25.516c0.222-6.627,0.45-13.488-0.496-19.619
	c-0.724-4.716-1.934-9.771-3.102-14.656c-4.732-19.743-6.992-33.251,4.207-40.719c1.807-1.2,3.64-1.787,5.603-1.787
	c12.791,0,29.537,25.209,33.059,37.882C216.21,297.942,214.965,308.77,210.731,322.147L210.731,322.147L210.731,322.147
	L210.731,322.147z M164.641,423.603c-31.764,7.514-66.293-5.7-86.415-22.144c-11.192-9.145-17.734-19.025-17.493-26.422
	c0.274-8.44,4.122-14.036,10.837-15.771c10.022-2.576,25.424,3.679,35.508,20.637c8.991,15.106,25.535,23.155,46.893,22.803
	c41.349-0.783,89.007-31.607,110.949-71.727c6.68-2.648,13.646-6.026,20.755-10.272C268.872,368.176,219.55,410.604,164.641,423.603
	L164.641,423.603L164.641,423.603L164.641,423.603z M322.564,99.617c18.119,51.168,23.011,171.663-32.651,209.968
	c-29.403,20.232-57.031,23.67-72.686,23.624c1.317-3.072,2.191-6.033,2.648-8.505c4.604-14.682,6.046-27.349-0.053-48.22
	c-0.261-0.966-0.633-2.062-1.076-3.248c11.623-23.076,32.136-28.464,43.394-29.612c15.458-1.552,31.099,3.079,37.243,11.023
	c1.2,1.552,3.443,1.839,4.996,0.639c1.552-1.2,1.839-3.431,0.639-4.983c-2.204-2.856-5.283-5.342-8.948-7.415
	c3.274-11.474,4.943-23.386,4.943-35.443c0-10.058-1.167-19.998-3.443-29.674c0.659,0.545,1.454,0.841,2.257,0.841
	c0.979,0,1.943-0.395,2.648-1.174c1.311-1.455,1.199-3.705-0.262-5.019l-2.805-2.541c-23.076-20.855-38.325-34.63-61.297-39.382
	c-14.18-2.935-30.107,0.6-44.156,3.714c-9.119,2.025-17.725,3.926-23.38,3.339c-7.523-0.789-13.569-4.441-15.053-9.089
	c-1.442-4.517,1.523-10.309,8.339-16.306c19.88-17.49,56.81-22.756,84.073-12.001c1.827,0.724,3.9-0.173,4.618-1.999
	c0.718-1.83-0.169-3.894-1.996-4.615c-11.088-4.373-23.663-6.281-36.199-5.952c0.496-0.845,0.659-1.878,0.34-2.886
	c-0.601-1.869-2.596-2.896-4.475-2.302c-18.964,6.066-40.83,11.535-60.286-0.427c-0.825-0.512-1.823-0.659-2.772-0.411
	c-0.939,0.245-1.738,0.871-2.208,1.722c-8.287,15.057-36.799,24.948-41.28,22.952c-2.648-1.174-6.304-4.406-7.898-9.65
	c-2.188-7.197-0.006-16.283,6.297-26.282c23.063-36.561,66.212-57.501,115.446-56.008c19.809,0.597,37.953,6.252,53.751,16.365
	c-1.037,0.685-1.787,1.595-2.205,2.766c-0.528,1.455-2.14,5.89,9.522,15.592l0.849,0.727c10.54,8.978,20.102,15.089,28.606,19.228
	C313.7,78.165,318.585,88.385,322.564,99.617L322.564,99.617L322.564,99.617L322.564,99.617z M382.4,43.88
	c-4.188,8.326-14.858,19.078-32.214,24.283c-3.659,1.099-7.547,1.653-11.564,1.653h-0.007c-11.251,0-29.853-4.422-54.56-25.479
	l-0.913-0.776c-3.64-3.026-5.909-5.678-6.835-7.191c0.626-0.052,1.591-0.052,2.687,0.033c12.575,1.021,32.86,1.138,47.021,1.138
	c7.65,0,15.32-0.036,22.495-0.072c6.313-0.036,12.249-0.062,17.461-0.062c9.803,0,15.947,0.121,18.308,0.359
	C384.278,38.724,383.959,40.769,382.4,43.88L382.4,43.88L382.4,43.88L382.4,43.88z" id="left-body-outline" fill="' + outline + '"></path>
            <path d="M141.751,64.458c-5.655,4.239-3.953,9.483,2.371,10.272c6.324,0.79,6.816,1.207,12.647-3.163
	c6.323-4.739,7.116-12.641,0-11.848C149.656,60.509,144.914,62.087,141.751,64.458" id="nose" fill="' + nose + '"></path>
            <path d="M125.151,67.621c0,3.927-3.183,7.109-7.113,7.109c-3.926,0-7.116-3.183-7.116-7.109
	c0-3.93,3.189-7.112,7.116-7.112C121.968,60.509,125.151,63.691,125.151,67.621" id="eye-left" fill="' + eye + '"></path>
            <path d="M207.353,47.872c0,3.926-3.183,7.109-7.112,7.109s-7.113-3.183-7.113-7.109
	c0-3.927,3.183-7.109,7.113-7.109S207.353,43.945,207.353,47.872" id="eye-right" fill="' + eye + '"></path>
    </g>
</svg>';
 
    //canvas に svg を書き出す
    var img = new Image();
    img.onload = function() {
        var ctx = d.getElementById("canvas").getContext("2d");

        //canvas のレスポンシブ対応
        var scale = d.getElementById("canvas").width / img.width;
        ctx.setTransform(scale, 0, 0, scale, 0, 0);
        ctx.drawImage(img, 0, 0);

        //canvas のデータを PNG として画像に書きだす
        var png = document.getElementById("canvas").toDataURL();
        d.getElementById("saveWapuu").src = png;
    };

    //SVG は base64 にする
    img.src = "data:image/svg+xml;base64," + btoa(svg);
}

//塗り絵関数の実行
wapuuNurie();

//各色 form に変更があった場合も塗り絵関数を実行して canvas を書き換える
document.getElementById("wapuuColor").addEventListener("change", wapuuNurie, false);

ライセンス関係

この塗り絵ツールよって作られたわぷーの画像および塗り絵ツールの JavaScript コードは「GPL バージョン2 またはそれ以降のバージョン」のライセンスとします。

わぷーの著作権はカネウチカズコさんに属します。

まとめ

わぷーは可愛いので結構どんな色でも似あいます。自分のサイトに合わせた色に変更して、サイトに登場させたりするのも面白そうです。

JavaScript コード自体は丈長ですがやってることは大したことないです。SVG ファイルがある画像ならばこんな感じで簡単に塗り絵の作成が可能なので、作ろうと思えば色んな塗り絵を作れます。

かわいいわぷーの画像たくさん作りましょー。