Vanilla JavaScript canvas test

html.html

<canvas id = "canv"></canvas>

style.css

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body
{
  width: 100%;
  height: 100%;
}

#canv
{
  width: 800px;
  height: 800px;
}

vanillacanvas.js

if (!window.requestAnimationFrame) 
{
  window.requestAnimationFrame = (function() 
                                  {
    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback, element) 
    {
      window.setTimeout(callback, 1000 / 60);
    };
  })();
}


var c = document.getElementById("canv");
var ctx = c.getContext("2d");



c.width = 800;
c.height = 800;

console.log(document.getElementById('canv'));

var mouse = 
{
	x: -9999,
  y: -9999,
  
  lx: -9999,
  ly: -9999,
  
  dx: 0,
  dy: 0,
  
  ax: 0,
  ay: 0,
  
  logpos: function()
  {
  	console.log(this);
  }
}

var t = 
{
	now: null,
	dt: 0,
	last: timestamp(),
	step: 1/60,
	time: 0
};

function timestamp()
{
	return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
}

document.addEventListener('mousemove', function(e)
{	
	mouse.lx = mouse.x;
  mouse.ly = mouse.y;
	mouse.x = e.clientX;
  mouse.y = e.clientY;
  mouse.dx = mouse.x - mouse.lx;
  mouse.dy = mouse.y - mouse.ly;
  mouse.ax = Math.abs(mouse.x - mouse.lx);
  mouse.ay = Math.abs(mouse.y - mouse.ly);
  
  mouse.logpos();
});

function step()
{
	t.now = timestamp();
	t.dt = t.dt + Math.min(1, (t.now - t.last) / 1000);

	while(t.dt > t.step) 
	{
		t.dt = t.dt - t.step;
		update();
	}

	render(t.dt);

	t.time += (t.now - t.last);
	t.last = t.now; 
  
	requestAnimationFrame(step);
}

function update()
{
  //line(mouse.lx, mouse.ly, mouse.x, mouse.y)
  line(
  
  400 + cosineBetween(-100, 300, t.time / 500), 
  
  400 + sineBetween(-100, 300, t.time / 500), 
  
  //400 + cosineBetween(-200, -100, t.time / 200),
  
  //400 + sineBetween(-200, -100, t.time / 200)
  
  0, 0
  
  )
}

function render()
{

}

step();

ctx.strokeStyle = 'rgba(255, 0, 0, 0.01)';
  ctx.fillStyle = 'rgba(255, 0, 0, 0.01)';
  ctx.lineWidth = 1;
  //ctx.globalCompositeOperation = 'multiply';

function line(x1, y1, x2, y2)
{
	ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  
  
  ctx.stroke();
}

function sineBetween(min, max, t)
{
    var halfRange = (max - min) / 2;
    return min + halfRange + Math.sin(t) * halfRange;
}

function cosineBetween(min, max, t)
{
    var halfRange = (max - min) / 2;
    return min + halfRange + Math.cos(t) * halfRange;
}