HTML5 CANVAS JAVASCRIPT SHELL

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title> ENTER THE TITLE OF THE PROJECT HERE </title>

body {
background-color: rgba(0,0,0,1);
}

#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
}

#fmxCanvas {
position: relative;
background-color:rgba(255,255,255,1);
border: rgba(255,255,255,1) thin dashed;
margin: 10px;
cursor: crosshair;
display: inline-block;
}

</style>

</head>

<body>

Add your personal notes or additional information here

</div>

// DEFINE GLOBAL VARIABLES HERE
const canvas = document.getElementById("fmxCanvas");
const ctx = canvas.getContext("2d");

const canvas1 = document.createElement("canvas");
const ctx1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;

const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");
canvas2.width = canvas.width;
canvas2.height = canvas.height;

const display = document.getElementById('display');

let counter = 0;
let mX = canvas.width / 2;
let mY = canvas.height / 2;

// FPS CONTROL VARIABLES
// To change the frame rate, just modify the value of this variable.
const desiredFPS = 30;
let fpsInterval = 1000 / desiredFPS;
let lastFrameTime = performance.now();

// ADD EVENT LISTENERS
window.addEventListener("load", setup, false);
canvas.addEventListener("mousemove", mousePos, false);

// MOUSE COORDINATES
function mousePos(event) {
const stage = canvas.getBoundingClientRect();
mX = event.clientX - stage.left;
mY = event.clientY - stage.top;
}

// INITIALIZE THE STARTING FUNCTION
function setup() {
// CALL SUBSEQUENT FUNCTIONS
clear();
draw(performance.now()); // Pass initial timestamp
}

// CLEAR THE CANVAS FOR ANIMATION
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
ctx2.clearRect(0, 0, canvas.width, canvas.height);
}

// THIS IS WHERE EVERYTHING HAPPENS
function draw(timestamp) {

window.requestAnimationFrame(draw);

const now = timestamp;
const elapsed = now - lastFrameTime;

// Only execute drawing logic if enough time has passed
if (elapsed > fpsInterval) {
lastFrameTime = now - (elapsed % fpsInterval);

counter += 0.1;

if (counter > Math.PI * 200) { counter = 0; }

clear(); // Refresh the frame

// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

// CREDITS
ctx.save();
const credits = "Name, Title, FMX XYZ, FA/SP YEAR";
ctx.font = 'bold 12px Helvetica';
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.shadowColor = "rgba(255,255,255,1)";
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(credits, 10, canvas.height - 10);
ctx.restore();

// HTML DISPLAY FIELD FOR TESTING PURPOSES
display.textContent = `${Math.round(mX)} || ${Math.round(mY)} || counter = ${Math.round(counter)} || FPS = ${Math.round(1000 / elapsed)} `;

}

}
</script>

</body>
</html>