fix loadAsset function in 6-space-game/2-drawing-to-canvas/README.md

[qgp9]

Hi, I made a small fix in the example code of 6-space-game/2-drawing-to-canvas/README.md
The corresponding code in 6-space-game/2-drawing-to-canvas/solution/app.js looks fine.

1. move resolve(img) in loadAsset function to the inside of the img.onload function to resolve the promise after the image is loaded
2. remove the async keyword of loadAsset because it is not that harmful but not yet necessary

[jlooper]

@softchris wdyt?

[softchris]

Hi, I made a small fix in the example code of 6-space-game/2-drawing-to-canvas/README.md
The corresponding code in 6-space-game/2-drawing-to-canvas/solution/app.js looks fine.

1. move resolve(img) in loadAsset function to the inside of the img.onload function to resolve the promise after the image is loaded
2. remove the async keyword of loadAsset because it is not that harmful but not yet necessary

I agree with 1 but not 2. Have a look at the solution code:

window.onload = async() => {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  const heroImg = await loadTexture('assets/player.png')
  const enemyImg = await loadTexture('assets/enemyShip.png')

  ctx.fillStyle = 'black';
  ctx.fillRect(0,0, canvas.width, canvas.height);
  ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height /4));
  createEnemies(ctx, canvas, enemyImg);
};

You can see that the await keyword is being used to wait for the textures to fully load and then we do the drawing. @qgp9

[softchris]

please readd async, otherwise you are good to go. Reason is the ussage in the solution:

window.onload = async() => {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  const heroImg = await loadTexture('assets/player.png')
  const enemyImg = await loadTexture('assets/enemyShip.png')

  ctx.fillStyle = 'black';
  ctx.fillRect(0,0, canvas.width, canvas.height);
  ctx.drawImage(heroImg, canvas.width/2 - 45, canvas.height - (canvas.height /4));
  createEnemies(ctx, canvas, enemyImg);
};

[qgp9]

You can see that the await keyword is being used to wait for the textures to fully load and then we do the drawing

Of course, 'await' is good for waiting for async or promisified function (and yes await can be called from only async function).
But what I removed is async from an async function (loadAsset) that returns a promise.
The loadAsset would work well with async, however, I think that duplication of async and returning promise may need a strong educational purpose or forcing of the coding convention (since it's "duplication" :-) ).

In practice, before I remove async, I had checked codes in this repo to catch some coding convention or style.
I think more relevant codes from the solution would be function loadTexture

Web-Dev-For-Beginners/6-space-game/2-drawing-to-canvas/solution/app.js

Lines 1 to 9 in 2258e0c

	function loadTexture(path) {
	return new Promise((resolve) => {
	const img = new Image();
	img.src = path;
	img.onload = () => {
	resolve(img);
	}
	})
	}

This is quite an equivalent function with the loadAsset without async.

so the removal of async from loadAsset does

1. match with coding style with the solution
2. Perfectly work in the algorithms
3. remove unnecessary duplication (if it's not really needed).

Add. Oh, It could be that you thought an async from async function run() but not from async function loadAsset. If then, my answer would be simpler :-)

[softchris]

I see your point, I agree