<script>
// DEFINE YOUR GLOBAL VARIABLES HERE var canvas;
var context; var canvas1;
var context1; var angle = 0; // INITIALIZE THE STARTING FUNCTION function init() { canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;
canvas1.height = canvas.height;

// 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*4) {
angle = 0;
context1.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;


for (var i=0; i<130; i++) {

context1.save();
context1.translate(canvas.width/2, canvas.height/2);
context1.rotate(i/20);
triangle();
context1.restore();
}


function triangle() {

context1.beginPath(); // DO NOT FORGET THIS!
context1.moveTo(x,y);
context1.lineTo(Ax,Ay);
context1.lineTo(mouseX, mouseY);
context1.lineTo(x,y);
context1.stroke();
context1.fillStyle = "rgba(255,0,0, 0.1)";
context1.fill();
context1.closePath();

}

context.drawImage(canvas1, 0,0, canvas.width, canvas.height);

} function erase() {
drawBkgd();
context.clearRect(0, 0, canvas.width, canvas.height);
} </script>