<script>

  // DEFINE YOUR GLOBAL VARIABLES HERE
 var canvas;

  var context;

  var angle = 0;
// INITIALIZE THE STARTING FUNCTION
 function init() {
 canvas = document.getElementById("myCanvas");

  context = canvas.getContext("2d");

  

  // use this instead of onmousemove="create()" inside the canvas tag

  canvas.addEventListener("mousemove", create, false);

  canvas.addEventListener("click", erase, false);

  

  // CALL SUBSEQUENT FUNCTIONS, as many as you need

  

  drawBkgd(); // COVER TRANSPARENT CANVAS

  create(); // THIS IS WHERE AL HAPPENS

  }

  

  function drawBkgd() { // USE THIS AREA TO MODIFY BKGD

  context.fillStyle = "#CCC";

  context.fillRect(0,0,canvas.width,canvas.height);

  }

  

  function create(event) { 
 angle += 0.1;

  

  if (angle >= Math.PI*2) { 

  angle = 0; 

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

  }

  

  var stage = canvas.getBoundingClientRect();

  var mouseX = event.clientX - stage.left; // this is in case you position canvas using css

  var mouseY = event.clientY - stage.top;

  var msg = "Mouse Coords: " + mouseX + ", " + mouseY;

  

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

  

  context.fillStyle = "rgba(255,0,255, 0.2)";

  context.font = 'bold 30px Helvetica';

  context.fillText(msg, 10, 30);

  

  var s = Math.sin(angle);

  var c = Math.cos(angle);

  

  var r = 100;

  var x = canvas.width/2;

  var y = canvas.height/2;

  

  var Ax = x + 100 * c;

  var Ay = y + 100 * s;

  

  

  context.beginPath(); // DO NOT FORGET THIS!

  context.moveTo(x,y);

  context.lineTo(Ax,Ay);

  context.lineTo(mouseX, mouseY);

  context.lineTo(x,y);

  context.stroke();

  context.fillStyle = "rgba(255,0,0, 0.1)";

  context.fill();

  context.closePath();

  

  }
function erase() {

  drawBkgd();

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

  }
</script>