JS Drawing

Draws Lines Easily

by onejdc

HTML

<canvas id="paper" width="500" height="500"></canvas>

CSS

canvas {
  position: relative;
  float:left;
  background-color:transparent;
}

JavaScript

/**
 * Merge defaults with user options
 * @private
 * @param {Object} defaults Default settings
 * @param {Object} options User options
 * @returns {Object} Merged values of defaults and options
 */
var extend = function ( defaults, options ) {
    var extended = {};
    var prop;
    for (prop in defaults) {
        if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
            extended[prop] = defaults[prop];
        }
    }
    for (prop in options) {
        if (Object.prototype.hasOwnProperty.call(options, prop)) {
            extended[prop] = options[prop];
        }
    }
    return extended;
};



function drawLined(options) {
	var defaults = {
  	canvas : options.canvas || (function(){var c = document.createElement("CANVAS");c.style.width='500px';c.style.height='500px';return document.body.appendChild(c);})(),
  	startX : 50,
    startY : 50,
    endX : 100,
    endY: 100,
    speed : 0.05,
    color : "black",
  };
  
  var opts = extend(defaults, options);
  
	var c = opts.canvas.getContext("2d");
	var amount = 0;


	interval = setInterval(function() {
  	  amount += opts.speed; // change to alter duration
      if (amount > 1) amount = 1;
      c.clearRect(0, 0, opts.canvas.width, opts.canvas.height);
      c.strokeStyle = opts.color;
      c.moveTo(opts.startX, opts.startY);
      c.lineTo(opts.startX + (opts.endX - opts.startX) * amount, 
      opts.startY + (opts.endY - opts.startY) * amount);
      c.stroke();
	}, 30);

}

//drawLine(	{startX:0,startY:0,endX:200,endY:200,color:"red"});



function drawLines(canvas, lines) {

	var defaults = {
  	canvas : canvas || document.getElementsByTagName("canvas")[0],
  	startX : 50,
    startY : 50,
    endX : 100,
    endY: 100,
    speed : 0.1,
    color : "black",
  };
  var options = lines[0];
  var opts = extend(defaults, options);
  var i = 0; // default iterator
  
	var c = opts.canvas.getContext("2d");
  var myInterval;
  
  function checkDone(amount,i) {

    if (amount == 1) {
   ...