examples/parallax.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		body, html, #main {
			margin: 0;
			width: 100%;
			height: 100%;
			border: none;
		}
	</style>
	<script type="text/javascript" src="../Canvas2d.js"></script>
	<script type="text/javascript">
		onload = async() => {
			window.scene = new Canvas2d.Scene(document.getElementById("my-canvas"));
			window.image = document.createElement("img");
			await new Promise(res => {
				image.onload = res;
				image.src = "https://thumbs.dreamstime.com/b/seamless-fantasy-landscape-vector-game-background-separated-layers-parallax-effect-illustration-your-design-78666286.jpg";
			});
			window.parallax = new Canvas2d.Parallax(image);
			scene.add(parallax);
			onmousemove = e => {
				parallax.x = e.clientX / 2;
				parallax.y = e.clientY / 2;
			}
			window.frame = () => {
				requestAnimationFrame(frame);
				scene.width = innerWidth;
				scene.height = innerHeight;
				scene.draw();
			}
			frame();
		}
	</script>
</head>
<body>
	<canvas id="my-canvas"></canvas>
</body>
</html>