<button id="erase" tabindex="-1">
  <span tabindex="0">Erase</span>
</button>
<div id="note" class="note hide">
  <p><strong>Note</strong>: Shaking your device to erase works but not inside this iframe. <a href="javascript:window.open(location.href)">Open separately in another tab</a>, then give it a try!</p>
</div>
<div class="board">
  <div class="top">
    <span class="caps">Magic</span>
    <span class="cursive">Etch A Sketch</span><sup>&reg;</sup>
    <span class="caps">Screen</span>
  </div>
  <div class="middle">
    <span class="dial-label">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
        <g>
          <polygon points="10.792,16.5 1,24.563 10.792,32.5 10.792,27.5 38.208,27.5 38.208,32.5 48,24.5 38.208,16.5 38.208,21.5 
            10.792,21.5"/>
        </g>
        <g>
          <polygon fill="#fff" points="9.792,15.5 0,23.563 9.792,31.5 9.792,26.5 37.208,26.5 37.208,31.5 47,23.5 37.208,15.5 37.208,20.5 9.792,20.5"/>
        </g>
      </svg>
    </span>
    <canvas></canvas>
    <span class="dial-label">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
        <g>
          <polygon points="16,38.209 24.063,48 32,38.209 27,38.209 27,10.792 32,10.792 24,1 16,10.792 21,10.792 21,38.209     "/>
        </g>
        <g>
          <polygon fill="#fff" points="15,37.209 23.063,47 31,37.209 26,37.209 26,9.792 31,9.792 23,0 15,9.792 20,9.792 20,37.209     "/>
        </g>
      </svg>
    </span>
  </div>
  <div class="dial" id="horz"></div>
  <div class="info">
    <div class="dial-labels">
      <span class="dial-label">Horizontal<br>Dial</span>
      <span class="dial-label">Vertical<br>Dial</span>
    </div>
    <div class="safety">
      <span class="caps">Magic screen is glass set in sturdy plastic frame<br>Use with care</span>
    </div>
  </div>
  <div class="dial" id="vert"></div>
</div>

console.clear();
window.addEventListener("load",app);

function app() {
  var cnv = document.querySelector("canvas"),
    c = cnv.getContext("2d"),
    root = document.querySelector(":root"),
    rootFS = window.getComputedStyle(root).getPropertyValue("font-size"),
    u = +rootFS.substr(0,rootFS.length-2),
    uw = 22.25,
    uh = 16.25,
    // canvas dimensions
    w = u * uw,
    h = u * uh,
    // scale, keep at 2 for best retina results
    s = 2;

  // set canvas dimensions with scale
  cnv.width = w * s;
  cnv.height = h * s;
  cnv.style.width = uw + "em";
  cnv.style.height = uh + "em";
  c.scale(s,s);
  
  var stylus = {
      x: w/2,
      y: h/2,
      w: 3
    },
    draw = function(color) {
      c.fillStyle = color;
      c.fillRect(stylus.x,stylus.y,stylus.w,stylus.w);
    },
    checkPos = function() {
      // x bounds
      if (stylus.x < 0) {
        stylus.x = 0;
      } else if (stylus.x > w - stylus.w) {
        stylus.x = w - stylus.w;
      }
      // y bounds
      if (stylus.y < 0) {
        stylus.y = 0;
      } else if (stylus.y > h - stylus.w) {
        stylus.y = h - stylus.w;
      }
    },
    shadeBrd = function() {
      c.fillStyle = "#bbb";
      c.fillRect(0,0,w,h);
    },
    erase = function() {
      let op = 0,
        opInc = 0.05,
        incStop = 0.5,
        doIt = function() {
          op += opInc;
          c.globalAlpha = op;
          shadeBrd();
          if (op < incStop) {
            setTimeout(doIt,1000/60);
          } else {
            op = 0;
            c.globalAlpha = 1;
          }
        };
      doIt();
    },
    move = function(d) {
      draw("#555");
      let inc = 2;
      // 0 = left, 1 = up, 2 = right, 3 = down
      switch (d) {
        case 0:
          stylus.x -= inc;
          break;
        case 1:
          stylus.y -= inc;
          break;
        case 2:
          stylus.x += inc;
          break;
        case 3:
          stylus.y += inc;
          break;
        default:
          break;
      }
      checkPos();
      draw("#eee");
    },
    moveKbd = function(e) {
      draw("#555");
      if (e && e.keyCode) {
        let inc = 2;
        switch (e.keyCode) {
          case 37:
            stylus.x -= inc;
            break;
          case 38:
            stylus.y -= inc;
            break;
          case 39:
            stylus.x += inc;
            break;
          case 40:
            stylus.y += inc;
            break;
          default:
            break;
        }
        // prevent scrolling at same time
        if (e.keyCode >= 37 && e.keyCode <= 40) {
          e.preventDefault();
        }
      }
      checkPos();
      draw("#eee");
    },
    getAngle = function(ele) {
      let el = document.querySelector(ele),
        elTr = el.style.transform,
        // break down matrix value of crank transform and get angle
        matrixVal = elTr.split('(')[1].split(')')[0].split(','),
        cos1 = matrixVal[0],
        sin = matrixVal[1],
        angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI));
      
      // convert negative angles to positive, correct -0 issue
      if (angle < 0) {
        angle += 360;
        if (angle == "-0") {
          angle = 0;
        }
      }
      return angle;
    },
    dialH = 0,
    dialHFn = Draggable.create("#horz", {
      type: "rotation",
      throwProps: true,
      onDrag: function() {
        let aH = getAngle("#horz");
        if (aH > dialH) {
          move(2);
        } else if (aH < dialH) {
          move(0);
        }
        dialH = aH;
      }
    }),
    dialV = 0,
    dialVFn = Draggable.create("#vert", {
      type: "rotation",
      throwProps: true,
      onDrag: function() {
        let aV = getAngle("#vert");
        if (aV > dialV) {
          move(1);
        } else if (aV < dialV) {
          move(3);
        }
        dialV = aV;
      }
    }),
    shakeBrd = function() {
      let brd = document.querySelector(".board");
      brd.className = "";
      void brd.offsetWidth;
      brd.className = "board shaking";
    };
  shadeBrd();
  
  if ("ontouchstart" in document.documentElement) {
    if (window.parent != window.self) {
      document.querySelector("#note").classList.remove("hide");
    } else {
      // interacting with board on iOS would cause accidental panning
      document.addEventListener("touchmove", function(e) {
            e.preventDefault();
        });
    }
  }
  
  // erase via device shake
  if (window.DeviceMotionEvent) {
    window.addEventListener("devicemotion",function(e) {
      let az = Math.round(e.acceleration.z);
      if (az < -16) {
        erase();
      }
    });
  }
  // erase via button
  let erEvent = "ontouchend" in document.documentElement ? "touchend" : "click";
  document.querySelector("#erase").addEventListener(erEvent, function() {
    shakeBrd();
    erase();
  });
  // draw with arrow keys
  document.addEventListener("keydown", moveKbd);
}