Canvas demo

README.md

Canvas demo

Credits

• 500 Giggly Lovers

bg-filter.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="50"
   height="50"
   id="svg3786"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="bg-filter.svg">
  <defs
     id="defs3788" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="4.15"
     inkscape:cx="50"
     inkscape:cy="50"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="953"
     inkscape:window-height="603"
     inkscape:window-x="45"
     inkscape:window-y="24"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata3791">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <cc:license
           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
        <dc:title />
        <dc:creator>
          <cc:Agent>
            <dc:title>Yu Inao</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title />
          </cc:Agent>
        </dc:rights>
      </cc:Work>
      <cc:License
         rdf:about="http://creativecommons.org/licenses/publicdomain/">
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Reproduction" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Distribution" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
      </cc:License>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-1002.3622)">
    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="m 0,1002.3622 0,50 50,0 0,-50 -50,0 z m 2.5,1 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8284 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6716 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m -45,5 c 0.8284273,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715727,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.8284275,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.6715725,1.5 -1.5,1.5 -0.8284265,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.6715735,-1.5 1.5,-1.5 z m 5,0 c 0.828428,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671572,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z m 5,0 c 0.828427,0 1.5,0.6716 1.5,1.5 0,0.8285 -0.671573,1.5 -1.5,1.5 -0.828427,0 -1.5,-0.6715 -1.5,-1.5 0,-0.8284 0.671573,-1.5 1.5,-1.5 z"
       id="path4304"
       inkscape:connector-curvature="0" />
  </g>
</svg>

bg-gradient.svg

Cakefile

fs = require('fs')
{print} = require('util')
{spawn} = require('child_process')

build = (callback) ->
  coffee = spawn('coffee', ['-c', '-o', './js', './js'])
  jade = spawn('jade', ['-P', '-O', './', './'])
  stylus = spawn('stylus', ['./css'])

  coffee.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  coffee.stdout.on 'data', (data) ->
    print(data.toString)

  coffee.on 'exit', (code) ->
    callback?() if code is 0

  jade.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  jade.stdout.on 'data', (data) ->
    #print(data.toString)

  jade.on 'exit', (code) ->
    callback?() if code is 0

  stylus.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  stylus.stdout.on 'data', (data) ->
    #print(data.toString)

  stylus.on 'exit', (code) ->
    callback?() if code is 0

task 'build', 'Build CoffeeScript, Jade, & Stylus', ->
  build()

task 'watch', 'Watch CoffeeScript & Stylus', ->
  # FIXME: These processes will be conflicted
  coffee = spawn('coffee', ['-w', '-c', '-o', './js', './js'])
  stylus = spawn('stylus', ['-w', './css'])

  coffee.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  coffee.stdout.on 'data', (data) ->
    print(data.toString())

  stylus.stderr.on 'data', (data) ->
    process.stderr.write(data.toString())

  stylus.stdout.on 'data', (data) ->
    #print(data.toString())

task 'open', 'Open index.html', ->
  spawn('open', 'index.html')
  invoke('watch')

demo.coffee

#! coffeescript

# Canvas demo
# [Yu Inao](http://twitter.com/japboy) in 2012

proxy = (fn, self) ->
  ->
    fn.apply(self, arguments)

Playground =
  ctx: {}
  width: 0
  height: 0
  init: ->
    canvas = document.getElementById('demo')
    @ctx = canvas.getContext('2d')
    @width = @ctx.canvas.width = window.innerWidth
    @height = @ctx.canvas.height = window.innerHeight
    window.addEventListener('resize', proxy(@update, @))
  update: ->
    @width = @ctx.canvas.width = window.innerWidth
    @height = @ctx.canvas.height = window.innerHeight

class Arc
  ctx: {}
  x: 0
  y: 0
  radius: 0

  constructor: (@ctx, width, height) ->
    @x = width / 2
    @y = height / 2
    @radius = if width - height > 0 then height / 2 else width / 2

  update: (width, height) ->
    @x = width / 2
    @y = height / 2
    @radius = if width - height > 0 then height / 2 else width / 2

  draw: (winWidth, winHeight) ->
    gradient = @ctx.createLinearGradient(winWidth / 2, (winHeight / 2) - @radius, winWidth / 2, (winHeight / 2) + @radius)

    gradient.addColorStop(0, 'rgba(84,38,56,0.1)')
    gradient.addColorStop(1, 'rgba(232,111,158,1)')

    @ctx.fillStyle = gradient

    @ctx.beginPath()
    @ctx.arc(winWidth / 2, winHeight / 2, @radius, 0, Math.PI * 2, false)
    @ctx.fill()

Playground.init()

arc = new Arc(Playground.ctx, Playground.width, Playground.height)

arc.draw(Playground.width, Playground.height)

window.addEventListener 'resize', ->
  arc.update(Playground.width, Playground.height)
  arc.draw(Playground.width, Playground.height)

demo.css

body {
  background-color: #000;
  background-image: url("../img/bg-gradient.svg");
  background-repeat: repeat-x;
  margin: 0;
  padding: 0;
}
#filter {
  background-image: url("../img/bg-filter.svg");
  background-repeat: repeat;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
#debug {
  background-color: #542638;
  border: 1px solid #8f244d;
  bottom: 10px;
  color: #4dab8c;
  padding: 5px;
  position: absolute;
  right: 10px;
  z-index: 2;
}
#debug ul {
  margin: 0;
  padding: 0;
}
#debug ul li {
  margin: 0;
  margin-left: 1em;
  padding: 0;
}

demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas demo</title>
    <meta name="author" content="Yu Inao">
    <meta name="rights-standard" content="pd">
    <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.min.css">
    <link rel="stylesheet" href="./css/demo.css">
  </head>
  <body>
    <div id="filter"></div>
    <section id="playground">
      <canvas id="demo"></canvas>
    </section>
    <section id="debug">
      <ul>
        <li id="log">log here</li>
      </ul>
    </section>
    <script src="./js/Tween.js" charset="UTF-8"></script>
    <script src="./js/demo.js" charset="UTF-8"></script>
  </body>
</html>

demo.jade

!!! 5
html
  head
    meta(charset='utf-8')
    title Canvas demo
    meta(name='author', content='Yu Inao')
    meta(name='rights-standard', content='pd')
    link(rel='stylesheet', href='http://normalize-css.googlecode.com/svn/trunk/normalize.min.css')
    link(rel='stylesheet', href='./css/demo.css')
  body
    div#filter
    section#playground
      canvas#demo
    section#debug
      ul
        li#log log here
    script(src='./js/Tween.js', charset='UTF-8')
    script(src='./js/demo.js', charset='UTF-8')

demo.js

// Generated by CoffeeScript 1.3.3
(function() {
  var Arc, Playground, arc, proxy;

  proxy = function(fn, self) {
    return function() {
      return fn.apply(self, arguments);
    };
  };

  Playground = {
    ctx: {},
    width: 0,
    height: 0,
    init: function() {
      var canvas;
      canvas = document.getElementById('demo');
      this.ctx = canvas.getContext('2d');
      this.width = this.ctx.canvas.width = window.innerWidth;
      this.height = this.ctx.canvas.height = window.innerHeight;
      return window.addEventListener('resize', proxy(this.update, this));
    },
    update: function() {
      this.width = this.ctx.canvas.width = window.innerWidth;
      return this.height = this.ctx.canvas.height = window.innerHeight;
    }
  };

  Arc = (function() {

    Arc.prototype.ctx = {};

    Arc.prototype.x = 0;

    Arc.prototype.y = 0;

    Arc.prototype.radius = 0;

    function Arc(ctx, width, height) {
      this.ctx = ctx;
      this.x = width / 2;
      this.y = height / 2;
      this.radius = width - height > 0 ? height / 2 : width / 2;
    }

    Arc.prototype.update = function(width, height) {
      this.x = width / 2;
      this.y = height / 2;
      return this.radius = width - height > 0 ? height / 2 : width / 2;
    };

    Arc.prototype.draw = function(winWidth, winHeight) {
      var gradient;
      gradient = this.ctx.createLinearGradient(winWidth / 2, (winHeight / 2) - this.radius, winWidth / 2, (winHeight / 2) + this.radius);
      gradient.addColorStop(0, 'rgba(84,38,56,0.1)');
      gradient.addColorStop(1, 'rgba(232,111,158,1)');
      this.ctx.fillStyle = gradient;
      this.ctx.beginPath();
      this.ctx.arc(winWidth / 2, winHeight / 2, this.radius, 0, Math.PI * 2, false);
      return this.ctx.fill();
    };

    return Arc;

  })();

  Playground.init();

  arc = new Arc(Playground.ctx, Playground.width, Playground.height);

  arc.draw(Playground.width, Playground.height);

  window.addEventListener('resize', function() {
    arc.update(Playground.width, Playground.height);
    return arc.draw(Playground.width, Playground.height);
  });

}).call(this);

demo.styl

body
  background-color: rgb(0,0,0)
  background-image: url('../img/bg-gradient.svg')
  background-repeat: repeat-x
  margin: 0
  padding: 0

#filter
  background-image: url('../img/bg-filter.svg')
  background-repeat: repeat
  height: 100%
  left: 0
  position: absolute
  top: 0
  width: 100%
  z-index: 1

#debug
  background-color: rgb(84,38,56)
  border: 1px solid rgb(143,36,77)
  bottom: 10px
  color: rgb(77,171,140)
  padding: 5px
  position: absolute
  right: 10px
  z-index: 2

#debug ul
  margin: 0
  padding: 0

#debug ul li
  margin: 0
  margin-left: 1em
  padding: 0