JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

function q(selector){
	return document.querySelector(selector);
};

var canvas = q('#myCanvas'),
		context = ctx = canvas.getContext('2d');

function setOptions(options){
	for(key in options){
  	var value = options[key];
    ctx[key] = value;
  }
};


/* ------------------------------ LINE ------------------------------*/

function drawLine(coordinates, options){
	/*
  	options = {
    	'lineWidth': 1, //int
      'strokeStyle': '#0bb0ef', //string: hex
      'lineCap': 'butt', //string: butt - default, round, or square
      
    }
  */
  
  function draw(startX,startY,endX,endY){
  	ctx.beginPath();

    //draw line
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);

    //set line options
    setOptions(options);

    ctx.stroke();

    //store last coordinates to use them later, e.g. continue line 
    ctx.lastX = endX;
    ctx.lastY = endY;
  }
  
  for(var i=0; i<coordinates.length; i++){
  	var coords = coordinates[i],
    		startX = coords[0],
        startY = coords[1],
        endX = coords[2],
        endY = coords[3];
    
    draw(startX,startY,endX,endY);
  }

};

//drawLine([50, 50, 100, 100]);
//drawLine([100, 100, 150, 50]);
//drawLine([150, 50, 200, 100]);

/*
drawLine([
   [50, 50, 100, 100]
,  [100, 100, 150, 50]
,  [150, 50, 200, 100]
], {
	 'lineWidth' : 10
,  'strokeStyle' : '#00b0ef'
,  'lineCap' : 'round'
});
*/
/*
drawLine([
   [50, 50, 100, 100]
,  [100, 100, 150, 50]
,  [150, 50, 200, 100]
], {
	 'lineWidth' : 10
,  'strokeStyle' : '#00b0ef'
,  'lineCap' : 'round'
});
*/

/* ------------------------------ LINE END ------------------------------*/

/* ------------------------------ ARC ------------------------------*/



function drawArc(startX,startY,radius,startAngle,endAngle,counterClockwise, options){
	// Explanation image: http://www.html5canvastutorials.com/demos/tutorials/html5-canvas-arcs/html5-canvas-arcs-diagram.png
  
  /*  
  		   Angle calculations
  
                1.5 PI
      	 -------------------
       ...