title: canvas drawing size fix needed
body: <p>on my Canvas when you change size i have it soo you can go from 1 - 100 but i have it so it goes up in 5's but when you got to 1 and go up again it goes to 6 then up again and goes to 11 and so on.</p>
  
  <p>here it is <a href="http://jsfiddle.net/daniel9000/tsaytohj/2/" rel="nofollow">http://jsfiddle.net/daniel9000/tsaytohj/2/</a></p>
  
  <p>here is my java script </p>
  
  <pre><code>function processData(c1, c2) {
  var cv1 = document.getElementById(c1).value;
  var cv2 = document.getElementById(c2).value;
  alert(cv1 + "\n" + cv2);
  }
  
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  
  var radius = 10;
  var dragging = false;
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  context.lineWidth = radius * 2;
  
  var putPoint = function (e) {
  if (dragging) {
  var bounds = canvas.getBoundingClientRect();
  var mouseX = e.clientX + bounds.left;
  var mouseY = e.clientY - bounds.top;
  var mouseX = e.clientX + bounds.left - 0;
  context.lineTo(mouseX, mouseY)
  context.strokeStyle = document.getElementById('color1').value;
  context.stroke();
  context.beginPath();
  context.arc(mouseX, mouseY, radius, 0, Math.PI * 2);
  context.fillStyle = document.getElementById('color1').value;
  context.fill();
  context.beginPath();
  context.moveTo(mouseX, mouseY);
  }
  }
  
  var engage = function (e) {
  dragging = true;
  putPoint(e);
  }
  
  var disengage = function () {
  dragging = false;
  context.beginPath();
  }
  
  canvas.addEventListener('mousedown', engage);
  canvas.addEventListener('mousemove', putPoint);
  canvas.addEventListener('mouseup', disengage);
  
  var setRadius = function (newRadius) {
  if (newRadius &lt; minRad) newRadius = minRad;
  else if (newRadius &gt; maxRad) newRadius = maxRad;
  radius = newRadius;
  context.lineWidth = radius * 2;
  
  radSpan.innerHTML = radius;
  }
  
  var minRad = 1,
  maxRad = 100,
  defaultRad = 20,
  interval = 5,
  radSpan = document.getElementById('radval'),
  decRad = document.getElementById('decrad'),
  incRad = document.getElementById('incrad');
  
  decRad.addEventListener('click', function () {
  setRadius(radius - interval);
  });
  incRad.addEventListener('click', function () {
  setRadius(radius + interval);
  });
  
  setRadius(defaultRad);
  
  var button = document.getElementById('btn-download');
  button.addEventListener('click', function (e) {
  var dataURL = canvas.toDataURL('image/png');
  button.href = dataURL;
  });
  </code></pre>