<!DOCTYPE html>
<html>
<body style="margin:0;">
Click on the screen to draw a circle.
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width  = screen.width;
canvas.height = screen.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle='transparent';
ctx.fillRect(0,0,canvas.width, canvas.height);

var circle = function (x, y, radius,color,width) {
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();
};


document.addEventListener("click",function(e){
circle(e.pageX-5, e.pageY-25, 10,"green",1);
circle(e.pageX, e.pageY, 20,"blue",2);
circle(e.pageX, e.pageY, 40,"blue",3);
},false);

document.addEventListener("mousemove",function(e){
circle(e.pageX-5, e.pageY-25, 15,"purple",1);
circle(e.pageX-5, e.pageY-65, 15,"purple",2);
circle(e.pageX-5, e.pageY-105, 15,"purple",3);
},false);

document.addEventListener("click",function(e){
ctx.font = "15px Courier";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World 😀☀️🍒⭐️✨💫☁️☁︎★☆☀︎✷❆", e.pageX, e.pageY); 
},false);



/* Instructions:
1. Add one line of code to make the EventListener look like this:
document.addEventListener("click",function(e){
circle(e.pageX-5, e.pageY-25, 10,"green",1);	
circle(e.pageX, e.pageY, 20,"blue",2);
},false);

2. Change the position, radius, width and color of the circles.
3. Add in an additional circle. 
4. Add in the following code (all 3 lines);
document.addEventListener("mousemove",function(e){
circle(e.pageX-5, e.pageY-25, 15,"purple",1);
},false);

5. Add in a second and third circle at different x and y positions.
6. What does this do? Add the following 6 lines of code:
document.addEventListener("click",function(e){
ctx.font = "15px Courier";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World 😀☀️🍒⭐️✨💫☁️☁︎★☆☀︎✷❆", e.pageX, e.pageY); 
},false);
7. Use your app to make a picture of the sky. 
8. Save as .html file, upload your app to your website and test.

*/


</script>
</body>
</html>