<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);

}