<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");
canvas.addEventListener("mousemove", create, false);
canvas.addEventListener("mouseup", clear, 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

  }
function create(event) { 
 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 = "Position: " + mouseX + ", " + mouseY;

  

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

  context.font = 'bold 30px Helvetica';

  context.fillText(msg, 150, 100);

  

  context.beginPath();

  context.moveTo(canvas.width/2, canvas.height/2);

  context.lineTo(mouseX, mouseY);

  context.stroke();
}
function clear() {
 context.fillRect(0,0,canvas.width, canvas.height);
}
</script>