<canvas id="trigonometri" width="2000" height="1000"></canvas>

html, body {
  text-align: center;
  float: none;
  padding: 0;
  margin: 0;
}

canvas {
  width: 100%;
  height: 50%;
  padding: 0;
  margin: 0;
}

 

window.onload = function() {
  var canvas = document.getElementById("trigonometri");
  c = canvas.getContext("2d");
  var angle = 90;
  var amplitute = 250;
  var centerx = canvas.width / 2;
  var centery = canvas.height / 2;
  var x = 0;
  var y = centery;
  var speedx = 3;
  var speedy = .008;
  var gradientx1 = centerx-200;
  var gradientx2 = centerx+200;
  var gradienty1 = centery-200;
  var gradienty2 = centery+300;

  var g1 = c.createLinearGradient(500, 0, 2000, 1000);
  g1.addColorStop(0, "pink");
  g1.addColorStop(1, "darkviolet");
  c.fillStyle = g1;
  c.fillRect(0, 0, canvas.width, canvas.height);

  var g2 = c.createLinearGradient(gradientx1, gradienty1, gradientx2, gradienty2);
  g2.addColorStop(0, "deeppink");
  g2.addColorStop(1, "darkviolet");
  c.fillStyle = g2;
  c.arc(centerx, centery, 200, 0, Math.PI * 2, false);
  c.fill();

  
  c.font = "20px Verdana";
  c.fillStyle = "rgba(255,255,255,.5)";
  var txt = "I AM FEELING GREAT!";
  var widthtext = c.measureText(txt).width;
  var halftext = widthtext / 2;
  c.fillText(txt, centerx - halftext, centery + centery / 1.5);
  


  c.font = "30px Verdana";
  c.fillStyle = "rgba(255,255,255,.6)";
  var txta = "▼";
  var widthtexta = c.measureText(txta).width;
  var halftexta = widthtexta / 2;
  c.fillText(txta, centerx - halftexta, centery - centery / 1.5);
  
  requestAnimationFrame(function draw(){
    
    c.beginPath();
    c.moveTo(x,y);
    
    x += speedx;
    angle += speedy;
    
    y = centery + Math.sin(angle)*amplitute;
    z = centery + Math.sin(angle)*-amplitute;
    
    c.lineTo(x,y);
    c.lineWidth = 3;
    c.strokeStyle = "rgba(255,255,255,.5)";
    c.stroke();
    
    
    
    requestAnimationFrame(draw);
    
  });
  requestAnimationFrame(function drawa(){
    
    c.beginPath();
    c.moveTo(x,z);
    x += speedx;
    angle += speedy;
   
    
    z = centery + Math.sin(angle)*(-amplitute);
    
    c.lineTo(x,z);
    c.lineWidth = 3;
    c.strokeStyle = "rgba(255,255,255,.5)";
    c.stroke();
    
    
    
    requestAnimationFrame(drawa);
    
  });
};