LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

WebSlate

CONTROLS
LINE JOIN
COLOR
LINE WIDTH
CSS
@import url(https://fonts.googleapis.com/css?family=Quicksand);

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}
body, button, input, select {
  font-family: "Quicksand", "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 400;
}
h1 {
  text-align: center;
  font-size: 35px;
  margin: 10px;
  font-weight: 100;
}
canvas {
  cursor: crosshair;
}
table {
  width: 100%;
}
td {
  padding: 5px;
}
small {
  font-size: 0.7rem;
}
input[type=number] {
  text-align: center;
}
input[type=number], input[type=color], select {
  width: 7rem;
}
JS
var p = new Palette("pad").size(window.innerWidth, 400);

var clicks = [],
    paint = false,
    options = {
      color: "#df4b26",
      join: "round",
      lineWidth: 5
    };

function clearAll() {
  p.clear(0, 0, window.innerWidth, 400).rect(0, 0, window.innerWidth, 400, "black");
}

clearAll();

function addClick(x, y, dragging) {
  clicks.push({
    x: x,
    y: y,
    dragging: dragging,
    color: options.color,
    join: options.join,
    lineWidth: options.lineWidth
  });
}

function redraw(){
  clearAll();
  for (var i = 0; i < clicks.length; i++) {		
    var actual = clicks[i];
    if (actual.dragging) {
      p.line(clicks[i-1].x, clicks[i-1].y, actual.x, actual.y, actual.join, actual.lineWidth, actual.color);
    } else {
      p.line(actual.x, actual.y, actual.x, actual.y, actual.join, actual.lineWidth);
    }
  }
}

p.canvas.addEventListener("mousedown", function (e) {
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
  redraw();
}, false);

p.canvas.addEventListener("mousemove", function (e) {
  if (paint) {
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
}, false);

p.canvas.addEventListener("mouseup",function (e) {
  paint = false;
}, false);

p.canvas.addEventListener("mouseout",function (e) {
  paint = false;
}, false);

document.getElementById("clear").onclick = function () {
  clearAll();
  clicks = [];
};

document.getElementById("export").onclick = function () {
  var url = p.exportDataURL("image/jpeg", 1.0);
  var win = window.open(url, '_blank');
  win.focus();
};

document.getElementById("linejoin").onchange = function () {
  options.join = this.value;
};

document.getElementById("color").onchange = function () {
  options.color = this.value;
};

document.getElementById("linewidth").onchange = function () {
  options.lineWidth = this.value;
};
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv