Paper2 Docs

View simple core setup example ^code

                
<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <canvas id="myCanvas" resize></canvas>
    <script>
      import("https://unpkg.com/paper2/paper2-core.js").then((paperModule) => {
        const { paper, Path } = paperModule;

        paper.setup("myCanvas");

        const DELAY = 1_000; // 1 second
        let spinSpeed = 1;

        setInterval(() => {
          spinSpeed += 1;
          if (spinSpeed > 9) spinSpeed = 1;
        }, DELAY);

        const path = new Path.Rectangle({
          point: [125, 50],
          size: [75, 75],
          strokeColor: "black",
        });

        paper.view.onFrame = () => path.rotate(spinSpeed);
      });
    </script>
  </body>
</html>

View paperscript setup example ^code

                
<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App (Paperscript)</title>
  </head>
  <body>
    <canvas id="myCanvas" resize></canvas>
    <script canvas="myCanvas" type="text/paperscript">
      const DELAY = 1_000; // 1 second
      let spinSpeed = 1;

      setInterval(() => {
        spinSpeed += 1;
        if (spinSpeed > 9) spinSpeed = 1;
      }, DELAY);

      const path = new Path.Rectangle({
        point: [125, 50],
        size: [75, 75],
        strokeColor: "black",
      });

      paper.view.onFrame = () => path.rotate(spinSpeed);
    </script>
    <script type="module" src="https://unpkg.com/paper2/paper2.js"></script>
  </body>
</html>

Paper2 ...

All Examples