<!DOCTYPE html>
<html>
<!-- This is a comment in html -->
<head>
<meta charset="UTF-8">

<title>Template</title>

<!--Import the P5 javascript libaries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>

<!--Import a font from google fonts -->
<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">

<style>
/*This is a comment in CSS*/
h1
{
text-align:center; 
color:white; /*text color*/
padding:20px;
margin: 20px;
border: 10px solid black;
border-radius: 5px; 
background-image:url(https://www.wildtextures.com/wp-content/uploads/wildtextures_regular-seamless-granite-texture-480x480.jpg);
box-shadow: 0px 10px 20px black, 0px -10px 20px black;
/*Implement the google font-->*/
font-family: 'Mukta', sans-serif;

text-shadow: 0px 10px 20px black;
}

body
{
background-color:gray;

}


</style>

</head>


<body>

<h1>TEMPLATE</h1>

<script>


function setup()
{
createCanvas(displayWidth, displayHeight);
background(50);
}

function draw()
{
//Draw a circle at the mouse X and Y positions

if(mouseIsPressed)
{
if(mouseButton==LEFT)
{
noStroke();
fill(50, 0, 200);
ellipse(mouseX, mouseY, 50, 50);
}
if(mouseButton==RIGHT)
{
fill(200, 0, 50);
rect(mouseX, mouseY, 50, 50);
}
if(mouseButton==CENTER)
{
fill(50);
ellipse(mouseX, mouseY, 25, 25);
}
}

}

</script>

</body>

</html>