Paper.js - Setup Template

index.html

<main class="container">
  <section class="content">
     <canvas class="canvas" id="canvas" resize></canvas>
  </section>
  <footer class="footer">
    <div class="footer__body">
      <p class="footer__text">A template for quickly starting a PaperJS project. <span class="signature">-CH</span></p>
    </div>
    <nav class="footer__nav">
      <a href="https://codepen.io/cooper_hu" target="_blank">Other Pens</a>
    </nav>
  </footer>
</main>

paper-js-setup-template.markdown

Paper.js - Setup Template

My template for making pens that use Paper.js

A Pen by Hugo Sereno Ferreira on CodePen.

License.

script.js

const state = [
  [[0, 0], 0b0100],
  [[1, 0], 0b0111],
  [[2, 0], 0b0100],
  [[1, 1], 0b1010],
  [[1, 2], 0b1000]
] 

with (paper) {
  paper.setup(document.getElementById("canvas"));

  const r1 = new Path.Rectangle({
    point: [10, 10],
    size: [80, 80]
  })
    
  const r2 = new Path.Rectangle({
    point: [110, 10],
    size: [80, 80]
  })

  const r3 = new Path.Rectangle({
    point: [110, 110],
    size: [80, 80]
  })

  const r12 = new Path.Rectangle({
    point: [90, 10],
    size: [20, 80]
  })
  
  const r23 = new Path.Rectangle({
    point: [110, 90],
    size: [80, 20]
  })

  const g = r1.unite(r2).unite(r12).unite(r3).unite(r23)
  
  g.position = view.center
  g.fillColor = 'lightblue'
  g.strokeColor = 'black'
  g.strokeWidth = 4
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.3/paper-full.min.js"></script>

style.scss

$black: #000000;
$white: #ffffff;

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  padding: 0 2px;
  color: $white;
  
  &:hover {
    color: $black;
    background: $white;
  }
}

.signature {
  display: inline-block;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: $white;
}

.footer {
  display: flex;
  flex-direction: row;
  
  padding: 15px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.66px;
  color: $white;
  background: $black;
  
  &__body {
    flex: 1;
  }
  
  &__nav {
    padding-left: 40px;
    align-self: center;
  }
  
  &__text {
    margin: 0;
  }
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background: black;
}