Nonaf canvas

Nonaf canvas

by Kashif Imran

HTML

<script src="https://rawgit.com/nonaf/canvas/master/nonaf-canvas.js"></script>
<div id="app">
  <div>
    <canvas id="my-canvas" width="500" height="400"></canvas>
  </div>
  <div class="controls-div" id="colors"></div>
  <div class="controls-div" id="sizes"></div>
  <div class="controls-div">
    <button id="rotate">Rotate</button>
    <button id="zoomin">Zoom in</button>
    <button id="zoomout">Zoom out</button>
    <button id="pan">Pan</button>
    <button id="draw">Draw</button>
    <button id="reset">Reset</button>
    <button id="clear">Clear</button>
  </div>
</div>

CSS

canvas {
  background-color: #ddd;
}

.pan {
  cursor: move;
}

.controls-div {
  margin-top: 12px;
}

#buttons {
  margin-top: 24px;
}

.color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
  cursor: pointer;
}

.color-btn.selected {
  width: 22px;
  height: 22px;
  margin-right: 4px;
}

.size-btn {
  cursor: pointer;
  width: 30px;
  height: 14px;
  display: inline-block;
  margin-right: 6px;
  position: relative;
}

.size-btn>div {
  background-color: black;
  box-sizing: content-box;
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.size-btn.selected>div {
  border: 2px solid #e67e22;
}

JavaScript

var img = new Image();
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');
var points = [];
var mode = "draw";
var nonaf, mouseDown, startX, startY, color, size;

['#000000', '#e74c3c', '#1abc9c', '#3498db', '#9b59b6', '#34495e', '#2ecc71', '#f1c40f', '#e67e22'].forEach(function(_color, i) {
  var div = document.createElement('div');
  div.className = 'color-btn';
  div.style.backgroundColor = _color;
  div.onclick = function() {
    document.querySelectorAll('.color-btn.selected').forEach(function(el) {
      el.className = 'color-btn';
    });
    div.className = 'color-btn selected';
    color = _color;
  };
  if (i == 1) {
    color = _color;
    div.className = 'color-btn selected';
  }
  document.getElementById('colors').appendChild(div);
});

[1, 2, 3, 4, 5, 6, 7, 8].forEach(function(_size) {
  var div = document.createElement('div');
  var inner = document.createElement('div');
  div.className = 'size-btn';
  inner.style.height = _size + 'px';
  div.onclick = function() {
    document.querySelectorAll('.size-btn.selected').forEach(function(el) {
      el.className = 'size-btn';
    });
    div.className = 'size-btn selected';
    size = _size;
  };
  if (_size == 3) {
    size = _size;
    div.className = 'size-btn selected';
  }
  div.appendChild(inner);
  document.getElementById('sizes').appendChild(div);
});

img.onload = function() {
  canvas.height = canvas.width * img.height / img.width;
  nonaf = nonafCanvas({
    canvas: canvas,
    size: {
      width: img.width,
      height: img.height
    },
    viewBox: {
      x: 0,
      y: 0,
      width: img.width,
      height: img.height
    },
    draw: draw,
    noBounds: true
  });
  document.getElementById('pan').onclick = function() {
    mode = "pan";
    document.querySelector('#app').classList.add('pan');
  };
  document.getElementById('draw').onclick = function() {
    mode = "draw";
    document.querySelector('#app').classList.remove('pan');
  };
 ...