I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares on the canvas, ensuring it's responsive and works seamlessly across all platforms and screen sizes. Despite multiple attempts, I haven't found a solution that caters to both mobile and browser versions. Any suggestions on how to align the timer precisely with the canvas objects, making it compatible with varying screen dimensions?
//game logic goes here//styling details go here<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<link rel="stylesheet"/>
</head>
<body>
<div class="header" id="header">
<a href="#default" class="logo">Next</a>
<div class="header-right">
</div>
</div>
<h1 id="h1"></h1>
<div class="gameCont">
<h1 id="timer"></h1>
<canvas class="game"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="script.js" type="module"></script>
</body>
</html>