Content

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Coinblend</title>
  <style>html, body, div, canvas {
      margin: 0;
      padding: 0;
      overflow: hidden;
  }</style>
</head>
<body>
  <div id="btc" style="color:rgb(255, 255, 255);margin:22px;position: absolute; font-family:   monospace; font-size: 63px">loading...</div>
<canvas id="myCanvas"  style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

function padZero(str, len) {
    len = len || 2;
    var zeros = new Array(len).join('0');
    return (zeros + str).slice(-len);
}
  
  
  
var ws = new WebSocket('wss://api.bitfinex.com/ws');

// Create function to send on open
ws.onopen = function() {
  ws.send(JSON.stringify({"event":"subscribe", "channel":"ticker", "pair":"BTCUSD"}));
};

ws.onmessage = function(msg) {
  // create a variable for response and parse the json data
  var response = JSON.parse(msg.data);
  // save hb variable from bitfinex
  var hb = response[1];
  if(hb != "hb") {
    document.getElementById("btc").innerHTML = "Bitcoin: "+  Math.round(response[7])+ "" ;
  }
};

var randomcolor= function(c) {if(c){return "#"+((c%255)/255 * 0xFFFFFF << 0).toString(16).padStart(6, '0')}else{return "#"+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0')}}
  var c1=randomcolor()
  var c2=randomcolor()
  var c3=randomcolor()

function ss(em,we){
  if(!em)em=150
   if(!we)we=4
  
 document.getElementById("btc").style.color=c1
  var r=btclist;

var column=[];
  column=r;

// console.log(  column )
var max=Math.max.apply(null, column);
  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;

ctx.strokeStyle=c1;//"rgb(131, 133, 216)";
ctx.beginPath();
ctx.moveTo(0, c.height);
           for(var i=0; i<r.length; i++){
             
             var hh=(1-Math.log(r[i])/Math.log(max))*c.height ;
          ctx.lineTo(c.width/r.length*i,  hh  );
            // console.log(c.width/r.length*i, c.height/r[i][3]);
       }

ctx.lineTo(c.width,c.height );
 ctx.closePath();

var grd = ctx.createLinearGradient(0, 0, 0, c.height);

grd.addColorStop(0, c2);
grd.addColorStop(1, "#fff");
ctx.globalAlpha = 0.5
ctx.fillStyle = grd;

ctx.shadowBlur = 10;
 ctx.shadowColor = c3;//"#43bcff";

ctx.fill();

ctx.stroke();

ctx.globalAlpha = 1

var getEMA = (a, r) => a.reduce((p, n, i) => i ? p.concat(2 * n / (r + 1) + p[p.length - 1] * (r - 1) / (r + 1)) : p, [a[0]]);
    var ema = getEMA(r, em);

ctx.strokeStyle= "rgba(255,250,250, 1)";
ctx.beginPath();
ctx.moveTo(0, c.height);
           for(var i=0; i<ema.length; i++){
             
             var hh=(1-Math.log(ema[i])/Math.log(max))*c.height ;
            // console.log(Math.log(ema));
             //var hh=(1-Math.log(ema)/Math.log(max))*c.height ;
             ctx.lineTo(c.width/r.length*i,  hh  );
            // console.log(c.width/r.length*i, c.height/r[i][3]);
       }

ctx.lineTo(c.width,  c.height  );
       ctx.closePath();
       ctx.fillStyle = invertColor(c2)+"30";//"rgba(255,183,67, 0.1)";

ctx.fill();

ctx.stroke();

///////////////////

ctx.beginPath();
ctx.moveTo(0, c.height);
           for(var i=0; i<ema.length; i++){
             
             var hh=(1-Math.log(ema[i]*we)/Math.log(max))*c.height ;
            // console.log(Math.log(ema));
             //var hh=(1-Math.log(ema)/Math.log(max))*c.height ;
             ctx.lineTo(c.width/r.length*i,  hh  );
            // console.log(c.width/r.length*i, c.height/r[i][3]);
       }

ctx.lineTo(c.width,  c.height  );
       ctx.closePath();
       ctx.fillStyle = invertColor(c2)+"10";//"rgba(255,183,67, 0.1)";

ctx.fill();

ctx.stroke();

}

onmousemove = function(e){
  //console.log("mouse location:", e.clientX, e.clientY/document.body.clientHeight)
ss(30+Math.round(500*e.clientY/document.body.clientHeight), 1.5+(e.clientX/document.body.clientWidth*5))
}

</script>
</body>
</html>