From a34dcbf47709c5d30e4632c3b018721af57ed728 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Fri, 22 Mar 2024 16:07:19 +0100
Subject: [PATCH] fix: Add width, height attrs to canvas element

---
 .../building_blocks/looping_code/index.md     | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/files/en-us/learn/javascript/building_blocks/looping_code/index.md b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
index 5a359ed276a0236..712d70fa1eb19d1 100644
--- a/files/en-us/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/en-us/learn/javascript/building_blocks/looping_code/index.md
@@ -35,32 +35,28 @@ Loops are all about doing the same thing over and over again. Often, the code wi
 Suppose we wanted to draw 100 random circles on a {{htmlelement("canvas")}} element (press the _Update_ button to run the example again and again to see different random sets):
 
 ```html hidden
-<button>Update</button> <canvas></canvas>
+<button>Update</button> <canvas width="680" height="380"></canvas>
 ```
 
 ```css hidden
-html {
-  width: 100%;
-  height: inherit;
-  background: #ddd;
-}
-
-canvas {
-  display: block;
-}
-
 body {
   margin: 0;
+  padding: 0;
+  text-align: center;
+}
+canvas {
+  border: 2px solid cornflowerblue;
+  border-radius: 5px;
 }
 
 button {
   position: absolute;
-  top: 5px;
-  left: 5px;
+  top: 20px;
+  left: 40px;
 }
 ```
 
-{{ EmbedLiveSample('Looping_code_example', '100%', 400) }}
+{{EmbedLiveSample('Looping_code_example', '', '400')}}
 
 Here's the JavaScript code that implements this example: