Fire JS Bin - Harmony

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/*
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-86951-7"]);
_gaq.push(["_trackPageview"]);
(function() {
  var a = document.createElement("script");
  a.type = "text/javascript";
  a.async = true;
  a.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
  (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(a)
})();
*/

function RGB2HSB(c, d, k) {
  var j, h, e, g, b, a;
  j = Math.min(Math.min(c, d), k);
  a = Math.max(Math.max(c, d), k);
  if (j == a) {
    return [0, 0, a * 100]
  }
  h = (c == j) ? d - k : ((d == j) ? k - c : c - d);
  e = (c == j) ? 3 : ((d == j) ? 5 : 1);
  g = Math.floor((e - h / (a - j)) * 60) % 360;
  b = Math.floor(((a - j) / a) * 100);
  a = Math.floor(a * 100);
  return [g, b, a]
}

function ColorSelector(a) {
  this.init(a)
}
ColorSelector.prototype = {
  container: null,
  color: [0, 0, 0],
  hueSelector: null,
  luminosity: null,
  luminosityData: null,
  luminositySelector: null,
  luminosityPosition: null,
  dispatcher: null,
  changeEvent: null,
  init: function (k) {
    var m = this,
        b, g, d;
    this.container = document.createElement("div");
    this.container.style.position = "absolute";
    this.container.style.width = "250px";
    this.container.style.height = "250px";
    this.container.style.visibility = "hidden";
    this.container.style.cursor = "pointer";
    this.container.addEventListener("mousedown", l, false);
    this.container.addEventListener("touchstart", f, false);
    g = document.createElement("canvas");
    g.width = k.width;
    g.height = k.height;
    b = g.getContext("2d");
    b.drawImage(k, 0, 0, g.width, g.height);
    d = b.getImageData(0, 0, g.width, g.height).data;
    this.container.appendChild(g);
    this.luminosity = document.createElement("canvas");
    this.luminosity.style.position = "absolute";
    this.luminosity.style.left = "0px";
    this.luminosity.style.top = "0px";
    this.luminosity.width = 250;
    this.luminosity.height = 250;
    this.container.appendChild(this.luminosity);
    this.hueSelector = document.createElement("canvas");
    this.hueSelector.style.position = "absolute";
    this.hueSelector.style.left = ((g.width - 15) / 2) + "px";
    this.hueSelector.style.top = ((g.height - 15) / 2) + "px";
    this.hueSelector.width = 15;
    this.hueSelector.height = 15;
    b = this.hueSelector.getContext("2d");
    b.lineWidth = 2;
    b.strokeStyle = "rgba(0, 0, 0, 0.5)";
    b.beginPath();
    b.arc(8, 8, 6, 0, Math.PI * 2, true);
    b.stroke();
    b.strokeStyle = "rgba(256, 256, 256, 0.8)";
    b.beginPath();
    b.arc(7, 7, 6, 0, Math.PI * 2, true);
    b.stroke();
    this.container.appendChild(this.hueSelector);
    this.luminosityPosition = [(k.width - 15), (k.height - 15) / 2];
    this.luminositySelector = document.createElement("canvas");
    this.luminositySelector.style.position = "absolute";
    this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px";
    this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px";
    this.luminositySelector.width = 15;
    this.luminositySelector.height = 15;
    b = this.luminositySelector.getContext("2d");
    b.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height);
    this.container.appendChild(this.luminositySelector);
    this.dispatcher = document.createElement("div");
    this.changeEvent = document.createEvent("Events");
    this.changeEvent.initEvent("change", true, true);

function l(n) {
      window.addEventListener("mousemove", c, false);
      window.addEventListener("mouseup", h, false);
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
    }

function c(n) {
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
    }

function h(n) {
      window.removeEventListener("mousemove", c, false);
      window.removeEventListener("mouseup", h, false);
      e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
    }

function f(n) {
      if (n.touches.length == 1) {
        n.preventDefault();
        window.addEventListener("touchmove", a, false);
        window.addEventListener("touchend", j, false);
        e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
      }
    }

function a(n) {
      if (n.touches.length == 1) {
        n.preventDefault();
        e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
      }
    }

function j(n) {
      if (n.touches.length == 0) {
        n.preventDefault();
        window.removeEventListener("touchmove", a, false);
        window.removeEventListener("touchend", j, false)
      }
    }

function Palette() {
 var e, d, b, a, n = 90,
 m = 1080,
 f = 1 / m,
 l = m / 360,
 c = Math.PI / 180,
 j, h, k, g, o;
 e = document.createElement("canvas");
 e.width = 250;
 e.height = 250;
 b = e.width / 2;
 a = e.height / 2;
 d = e.getContext("2d");
 d.lineWidth = 1;
 for (j = 0; j < m; j++) {
 h = j / l * c;
 k = Math.cos(h);
 g = Math.sin(h);
 d.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)";
 d.beginPath();
 d.moveTo(k + b, g + a);
 d.lineTo(k * n + b, g * n + a);
 d.stroke()
 }
 o = d.createRadialGradient(b, b, 0, b, b, n);
 o.addColorStop(0, "rgba(255, 255, 255, 1)");
 o.addColorStop(1, "rgba(255, 255, 255, 0)");
 d.fillStyle = o;
 d.fillRect(0, 0, e.width, e.height);
 return e
}

function onWindowMouseMove(a) {
  mouseX = a.clientX;
  mouseY = a.clientY
}

function onWindowResize() {
  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  menu.container.style.left = ((SCREEN_WIDTH - menu.container.offsetWidth) / 2) + "px";
  about.container.style.left = ((SCREEN_WIDTH - about.container.offsetWidth) / 2) + "px";
  about.container.style.top = ((SCREEN_HEIGHT - about.container.offsetHeight) / 2) + "px"
}

function onWindowKeyUp(event) {
  switch (event.keyCode) {
  case 16:
    shiftKeyIsDown = false;
    foregroundColorSelector.container.style.visibility = "hidden";
    break;
  case 18:
    altKeyIsDown = false;
    break;
  case 82:
    brush.destroy();
    brush = eval("new " + BRUSHES[menu.selector.selectedIndex] + "(context)");
    break
  }
  context.lineCap = BRUSH_SIZE == 1 ? "butt" : "round"
}

function onWindowBlur(a) {
  shiftKeyIsDown = false;
  altKeyIsDown = false
}

function onDocumentMouseDown(a) {
  if (!isMenuMouseOver) {
    a.preventDefault()
  }
}

function onDocumentMouseOut(a) {
  onCanvasMouseUp()
}

function onForegroundColorSelectorChange(a) {
  COLOR = foregroundColorSelector.getColor();
  menu.setForegroundColor(COLOR);
  if (STORAGE) {
    localStorage.brush_color_red = COLOR[0];
    localStorage.brush_color_green = COLOR[1];
    localStorage.brush_color_blue = COLOR[2]
  }
}

function onBackgroundColorSelectorChange(a) {
  BACKGROUND_COLOR = backgroundColorSelector.getColor();
  menu.setBackgroundColor(BACKGROUND_COLOR);
  document.body.style.backgroundColor = "rgb(" + BACKGROUND_COLOR[0] + ", " + BACKGROUND_COLOR[1] + ", " + BACKGROUND_COLOR[2] + ")";
  if (STORAGE) {
    localStorage.background_color_red = BACKGROUND_COLOR[0];
    localStorage.background_color_green = BACKGROUND_COLOR[1];
    localStorage.background_color_blue = BACKGROUND_COLOR[2]
  }
}

function onMenuForegroundColor() {
  cleanPopUps();
  foregroundColorSelector.show();
  foregroundColorSelector.container.style.left = ((SCREEN_WIDTH - foregroundColorSelector.container.offsetWidth) / 2) + "px";
  foregroundColorSelector.container.style.top = ((SCREEN_HEIGHT - foregroundColorSelector.container.offsetHeight) / 2) + "px";
  isFgColorSelectorVisible = true
}

function onMenuBackgroundColor() {
  cleanPopUps();
  backgroundColorSelector.show();
  backgroundColorSelector.container.style.left = ((SCREEN_WIDTH - backgroundColorSelector.container.offsetWidth) / 2) + "px";
  backgroundColorSelector.container.style.top = ((SCREEN_HEIGHT - backgroundColorSelector.container.offsetHeight) / 2) + "px";
  isBgColorSelectorVisible = true
}

function onMenuSelectorChange() {
  if (BRUSHES[menu.selector.selectedIndex] == "") {
    return
  }
  brush.destroy();
  brush = eval("new " + BRUSHES[menu.selector.selectedIndex] + "(context)");
  window.location.hash = BRUSHES[menu.selector.selectedIndex]
}

function onMenuMouseOver() {
  isMenuMouseOver = true
}

function onMenuMouseOut() {
  isMenuMouseOver = false
}

function onMenuSave() {
  flatten();
  window.open(flattenCanvas.toDataURL("image/png"), "mywindow")
}

function onMenuClear() {
  if (!confirm("Are you sure?")) {
    return
  }
  context.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  saveToLocalStorage();
  brush.destroy();
  brush = eval("new " + BRUSHES[menu.selector.selectedIndex] + "(context)")
}

function onMenuAbout() {
  cleanPopUps();
  isAboutVisible = true;
  about.show()
}

function onCanvasMouseDown(b) {
  var c, a;
  clearTimeout(saveTimeOut);
  cleanPopUps();
  if (altKeyIsDown) {
    flatten();
    c = flattenCanvas.getContext("2d").getImageData(0, 0, flattenCanvas.width, flattenCanvas.height).data;
    a = (b.clientX + (b.clientY * canvas.width)) * 4;
    foregroundColorSelector.setColor([c[a], c[a + 1], c[a + 2]]);
    return
  }
  BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;
  brush.strokeStart(b.clientX, b.clientY);
  window.addEventListener("mousemove", onCanvasMouseMove, false);
  window.addEventListener("mouseup", onCanvasMouseUp, false)
}

function onCanvasMouseMove(a) {
  BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;
  brush.stroke(a.clientX, a.clientY)
}

function onCanvasMouseUp() {
  brush.strokeEnd();
  window.removeEventListener("mousemove", onCanvasMouseMove, false);
  window.removeEventListener("mouseup", onCanvasMouseUp, false);
  if (STORAGE) {
    clearTimeout(saveTimeOut);
    saveTimeOut = setTimeout(saveToLocalStorage, 2000, true)
  }
}

function onCanvasTouchStart(a) {
  cleanPopUps();
  if (a.touches.length == 1) {
    a.preventDefault();
    brush.strokeStart(a.touches[0].pageX, a.touches[0].pageY);
    window.addEventListener("touchmove", onCanvasTouchMove, false);
    window.addEventListener("touchend", onCanvasTouchEnd, false)
  }
}

function onCanvasTouchMove(a) {
  if (a.touches.length == 1) {
    a.preventDefault();
    brush.stroke(a.touches[0].pageX, a.touches[0].pageY)
  }
}

function onCanvasTouchEnd(a) {
  if (a.touches.length == 0) {
    a.preventDefault();
    brush.strokeEnd();
    window.removeEventListener("touchmove", onCanvasTouchMove, false);
    window.removeEventListener("touchend", onCanvasTouchEnd, false)
  }
}

function saveToLocalStorage() {
  localStorage.canvas = canvas.toDataURL("image/png")
}

function flatten() {
  var a = flattenCanvas.getContext("2d");
  a.fillStyle = "rgb(" + BACKGROUND_COLOR[0] + ", " + BACKGROUND_COLOR[1] + ", " + BACKGROUND_COLOR[2] + ")";
  a.fillRect(0, 0, canvas.width, canvas.height);
  a.drawImage(canvas, 0, 0)
}

Pop out