I am currently working on customizing my homepage with an interactive animation. However, I am facing some challenges in integrating it seamlessly into the page. You can view the progress at . My main issue is preventing the canvas object from being selected when users interact with the page. The animation is a Processing script that has been translated to JavaScript. Here is an excerpt from the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>geotheory.co.uk</title>
</head>
<body id="home" bgcolor="#202020">
<script src="processing-1.4.1.min.js"></script>
<div id="canvasContainer">
<canvas padding: 0 data-processing-sources="rectangles.pde"></canvas>
</div>
</body>
Any help or guidance would be greatly appreciated.