Refactor: Update image loading code to clear Error

assets/js/clock.js

@@ -4,29 +4,35 @@
 // http://www.script-tutorials.com/html5-clocks/
 // https://www.w3schools.com/graphics/canvas_clock.asp
 
-// Get the javascript DOM reference to the canvas tag
-const canvas = document.getElementById('clockCanvas');
+const canvas = document.getElementById('clockCanvas');  // Get the javascript DOM reference to the canvas tag
 const context = canvas.getContext('2d'); // The context method contains all the properties needed to draw on the canvas
+const clockFaceImg = new Image();
+clockFaceImg.src = 'assets/img/clock-face.png';
+
+
+
 
 // Code Snippet adapted from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
 // Fetch the background image and wait for it to load
-async function getClockImage() {
-    const response = await fetch('assets/img/clock-face.png');
-    if (!response.ok) {
-        throw new Error(`Error! status: ${response.status}`);
-    } else {
-        const blob = await response.blob();  // returns the results of the fetch function as a blob
-        const url = URL.createObjectURL(blob);  // creates a DOMString containing the object URL that can be used to reference the contents of the specified source object.
-        clockFaceImg.src = url;
+/*async function getClockImage() {
+    try {
+        const response = await fetch('assets/img/clock-face.png');
+        if (!response.ok) {
+            throw new Error(`Error! status: ${response.status}`);
+        } else {
+            const blob = await response.blob();  // returns the results of the fulfilled fetch promise as a blob
+            const url = URL.createObjectURL(blob);  // creates a DOMString containing the object URL that can be used to reference the contents of the specified source object.
+            clockFaceImg.src = url;
+        }
+    } catch(error) {
+        console.log('There has been a problem with your fetch operation: ' + error.message);
     }
 }
 
-getClockImage().catch(error => {
-    console.log('There has been a problem with your fetch operation: ' + error.message);
-});
+getClockImage();
 
 
-/*function getImage(url) {
+function getImage(url) {
     return new Promise(function(resolve, reject) {
         let clockFaceImg = new Image();
         clockFaceImg.onload = function() { 
@@ -46,9 +52,10 @@ getImage('assets/img/clock-face.png').then(function(response) {
 })*/
 
 // Add the clock face
-function loadBackgroundImage() {
-    context.drawImage(getClockImage, 0, 0, canvas.clientWidth, canvas.height);
-}
+clockFaceImg.addEventListener('Load', e => {
+    context.drawImage(clockFaceImg, 0, 0, canvas.width, canvas.height);
+});
+
 
 // Draw the clock hour hand
 
@@ -64,12 +71,13 @@ function loadBackgroundImage() {
 
 // Create the whole clock
 function generateClock() {
-    loadBackgroundImage();
+
 }
 
 // Make the clock run
 function clock() {
-
+    context.translate(canvas.width/2, canvas.height/2);
+    generateClock();
 }
 
 clock();  // start the application