var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

​

var w = canvas.width;

var h = canvas.height;

​

​

var cw=canvas.width;

var ch=canvas.height;

var fov = 250;

​

var pts = [[{"X":"52.654519585231995","Y":"8.281888961791992"},{"X":"52.692407627195315","Y":"8.282232284545898"},{"X":"52.69407228181244","Y":"8.284463882446289"},{"X":"52.6954247669531","Y":"8.28669548034668"},{"X":"52.695320731122195","Y":"8.290987014770508"},{"X":"52.69417632061854","Y":"8.293905258178711"},{"X":"52.69230358417426","Y":"8.295278549194336"},{"X":"52.690222671685994","Y":"8.295621871948242"},{"X":"52.68741328250608","Y":"8.296823501586914"},{"X":"52.68293869694087","Y":"8.29716682434082"},{"X":"52.67450858118072","Y":"8.296651840209961"},{"X":"52.66399467614557","Y":"8.296480178833008"},{"X":"52.6612877168865","Y":"8.298368453979492"},{"X":"52.660142414421955","Y":"8.300600051879883"},{"X":"52.65930944832587","Y":"8.302316665649414"},{"X":"52.658580589970896","Y":"8.305234909057617"},{"X":"52.65826821838419","Y":"8.307981491088867"},{"X":"52.65837234249445","Y":"8.309869766235352"},{"X":"52.65910120432169","Y":"8.311929702758789"},{"X":"52.66191241467305","Y":"8.314332962036133"},{"X":"52.66357823178733","Y":"8.314332962036133"},{"X":"52.66513987767027","Y":"8.31416130065918"},{"X":"52.66743019069476","Y":"8.312616348266602"},{"X":"52.66951218928502","Y":"8.310213088989258"},{"X":"52.67409223701214","Y":"8.308496475219727"},{"X":"52.68335495679925","Y":"8.317766189575195"},{"X":"52.68595649102906","Y":"8.315019607543945"},{"X":"52.687205172413364","Y":"8.313989639282227"},{"X":"52.69147123108014","Y":"8.31416130065918"},{"X":"52.69292783858143","Y":"8.324460983276367"},{"X":"52.688349765649804","Y":"8.331842422485352"},{"X":"52.67898403041112","Y":"8.341283798217773"},{"X":"52.67482083670333","Y":"8.339567184448242"},{"X":"52.672947270089935","Y":"8.340425491333008"},{"X":"52.670969529275744","Y":"8.34111213684082"},{"X":"52.669720383688166","Y":"8.341455459594727"},{"X":"52.66555630714824","Y":"8.340768814086914"},{"X":"52.66368234324891","Y":"8.343172073364258"},{"X":"52.66076712857737","Y":"8.364629745483398"},{"X":"52.66951218928502","Y":"8.365659713745117"},{"X":"52.67305135923188","Y":"8.36308479309082"},{"X":"52.68127361783348","Y":"8.356904983520508"},{"X":"52.68460371257021","Y":"8.356561660766602"},{"X":"52.69074290910587","Y":"8.360681533813477"},{"X":"52.69136718582764","Y":"8.363428115844727"},{"X":"52.69188740961072","Y":"8.368234634399414"},{"X":"52.6912631403272","Y":"8.373041152954102"},{"X":"52.68949432888451","Y":"8.379220962524414"},{"X":"52.687621391607","Y":"8.382654190063477"},{"X":"52.684915895933905","Y":"8.386430740356445"},{"X":"52.6823142997145","Y":"8.389863967895508"},{"X":"52.679712548518395","Y":"8.393640518188477"},{"X":"52.67409223701214","Y":"8.398447036743164"},{"X":"52.670657246226746","Y":"8.400163650512695"},{"X":"52.66545220015074","Y":"8.398962020874023"},{"X":"52.66295355780973","Y":"8.393125534057617"},{"X":"52.66441111653572","Y":"8.386945724487305"},{"X":"52.667117882350325","Y":"8.384027481079102"},{"X":"52.66888760012375","Y":"8.38231086730957"},{"X":"52.68189802993765","Y":"8.373041152954102"}]]; 

​

    mimicSvg(pts,1);

​

​

function mimicSvg(pts,n){

​

  // make caps & joins round

  //ctx.lineCap='square';

  ctx.lineJoin='round';

​

​

  // draw the outside line with red shadow

  ctx.shadowColor='red';

  ctx.shadowBlur='5';

  ctx.lineWidth='60';

  //ctx.scale(9,9);

//ctx.rotate((Math.PI/180)*25);

  //ctx.translate(52.67528921580262,8.373513221740723);

  // draw multiple times to darken shadow

  drawPolyline(pts);

  drawPolyline(pts);

  drawPolyline(pts);

​

  // stop shadowing

  ctx.shadowColor='transparent';

​

  // refill the outside line with pink

  ctx.strokeStyle='yellowgreen';

  drawPolyline(pts);

​

  // draw the inside line

  ctx.lineWidth=2;

  ctx.strokeStyle='blue';

  drawPolyline(pts);

​

}

​

function drawPolyline(pts){

  ctx.beginPath();

  function endProp( mathFunc, array, property ) {

    return Math[ mathFunc ].apply(array, array.map(function ( item ) {

        return item[ property ];

    }));

}

​

var maxY = endProp( "max", pts[0], "Y" ), // 8.389

    minY = endProp( "min", pts[0], "Y" );

var maxX = endProp( "max", pts[0], "X" ), // 8.389

    minX = endProp( "min", pts[0], "X" );

  for(var i=1;i<pts[0].length;i++){

    var a = (((pts[0][i].X - minX) * (600 - 0)) / (maxX - minX)) + 0;

    var b = (((pts[0][i].Y - minY) * (600 - 0)) / (maxY - minY)) + 0;

    ctx.lineTo(a,b);

  }

  ctx.stroke();

}

​

function randomPoint(min,max) {

    return Math.floor(Math.random()*(max-min+1)+min);

}

​

document.getElementById('add_pts').addEventListener('click', function(e) {

  c=Math.random();

  var i = 52.6+c;

  var n = 8.3+c;

  pts.push({X:i,Y:n});

  ctx.clearRect(0, 0, canvas.width, canvas.height);

mimicSvg(pts,1);

  e.preventDefault();

  return false;

});

​

​

​