Canvas Bootstrap

Bootstrap for a Canvas drawing thing

by Frank Taylor

HTML

<div class="canvasContainer">

</div>
<article>
  <h1>Controls</h1>
  <dl>
    <dt><kbd>	&uarr;</kbd></dt>
    <dd>moves up</dd>
    <dt><kbd>	&darr;</kbd></dt>
    <dd>moves down</dd>
    <dt><kbd>	&larr;</kbd></dt>
    <dd>moves left</dd>
    <dt><kbd>	&rarr;</kbd></dt>
    <dd>moves right</dd>
    <dt><kbd>	&uarr;</kbd></dt>
    <dd>moves up</dd>
    <dt><kbd>	-</kbd></dt>
    <dd>makes it smaller</dd>
    <dt><kbd>	+</kbd></dt>
    <dd>Makes it larger</dd>
     <dt><kbd>	a</kbd></dt>
    <dd>Rotates a set counterclockwise</dd>
     <dt><kbd>	a</kbd></dt>
    <dd>Rotates a set clockwise</dd>
  </dl>
</article>

CSS

ul,
ol,
dl {
  padding: .618em .618rem;
}

li {
  text-indent: -.9em;
  line-height: 1.618;
  padding: 0;
  margin: 0 0 0 .618rem;
}

li {
  list-style-position: inside;
}

dt {
  text-indent: -.618rem;
}

dd {
  margin: 0;
  padding: 0 .618rem 0 .618rem;
}

kbd,
samp,
data {
  background-color: rgba(165, 165, 165, .2);
}

kbd {
  font-size: .75em;
  padding: .25ex .5ex;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
}

.canvasContainer {
  width: 90vw;
  height: 400px;
  outline: 2px solid black;
}

JavaScript

console.clear();
/*
TODO: figure out rotations
*/

class CanvasApp {
  constructor(container) {
    this.container = container;

    this.shapeDefs = {
      circle: 50,
      square: 50,
      angle: 0
    }

    this.images = {};

  }
  get dimensions() {
    return {
      width: this.container.offsetWidth,
      height: this.container.offsetHeight
    };
  }

  get context() {
    return this.canvas.getContext('2d');
  }

  get backContext() {
    return this.backCanvas.getContext('2d');
  }



  // Only run once
  createCanvas() {
    this.canvas = document.createElement('canvas');
    this.backCanvas = document.createElement('canvas');

    this.container.appendChild(this.canvas);
  }

  sizeCanvas() {
    this.canvas.height = this.dimensions.height;
    this.canvas.width = this.dimensions.width;

    this.backCanvas.height = this.dimensions.height;
    this.backCanvas.width = this.dimensions.width;
  }

  clearCanvas() {
    this.context.clearRect(0, 0, this.dimensions.width, this.dimensions.height);
  }

  rotateCanvas(degrees) {
    this.context.rotate((Math.PI / 180) * degrees);
  }

  //useful for clipping images, or other controls where you need a one-off canvas and not a back canvas
  BlankCanvas(w, h = w) {
    let canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;

    return canvas;
  }

  Circle(x, y, radius) {
    let circle = new Path2D();
    let startA = 0;
    let endA = Math.PI / 180 * 360;

    circle.arc(x, y, radius, startA, endA, false);

    return circle;
  }

  drawCircle(x, y, radius) {
    let circle = this.Circle(x, y, radius);

    this.context.stroke(circle);
  }

  clipCircle(x, y, radius) {
    let circle = this.Circle(x, y, radius);

    this.context.clip(circle);
  }

  drawCircleSet(baseX, baseY, nCircles = 4) {
    let angle = this.shapeDefs.angle;
    let angles = [];
    let radius = this.dimensions.width - ((this.shapeDefs.circle * 2.5) * 2);
    let radians = Math.PI / 180;
    let...