fix: Add width, height attrs to canvas element

[bsmth]

Description

The canvas element had no width and height attributes applied, so it was looking a little broken. This PR adds them in to the live sample so it looks a little better:

-<canvas></canvas>
+<canvas width="680" height="380"></canvas>

The defaults are 150 x 300: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#attributes

Motivation

Reader reports a strange-looking example.

Related issues and pull requests

#31288

[github-actions]

Preview URLs

• /en-US/docs/Learn/JavaScript/Building_blocks/Looping_code

[wbamberg]

I think this is another regression caused by the fact that the Playground loads content after DOMContentLoaded is fired, which should be fixed by mdn/yari#10770.

You can see that the code sets canvas width and height inside the DOMContentLoaded event handler:

content/files/en-us/learn/javascript/building_blocks/looping_code/index.md

Lines 72 to 75 in 0a3268b

	document.addEventListener("DOMContentLoaded", () => {
	canvas.width = document.documentElement.clientWidth;
	canvas.height = document.documentElement.clientHeight;
	});

, and that the page used to work: https://web.archive.org/web/20230323062429/https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code.

So this page ought to not need this fix once mdn/yari#10770 percolates, and that seems like a better fix since it's not hardcoding the size.

[wbamberg]

See #32801 (comment), I'm not sure this fix is needed.

[bsmth]

Nice, thanks for checking, let me close for now and we can check if the Yari fix resolved it 👍

[wbamberg]

No, the Yari PR does not seem to have fixed the regression :(

[bsmth]

Linking to a follow-up here to check:

• fix(playground): dispatch readystatechange + bubble DOMContentLoaded on document yari#10946

[wbamberg]

It is partly fixed by that PR. The canvas does occupy the whole iframe now, but actually it is a little too big, so we get scrollbars: