画像が表示されなくなっていたのを修正

mdn · Dec 20, 2024 · 7501c03 · 7501c03
1 parent 1f7450b
commit 7501c03
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -684,13 +684,13 @@ const ptrn = ctx.createPattern(img, "repeat");
 
 この最後の例では、 `fillStyle` プロパティに割り当てるパターンを作成します。唯一の注目すべき点は、画像の `onload` ハンドラーを使用していることです。これは、パターンに割り当てる前に画像が読み込まていれることを保証するためです。
 
-```js
+```js live-sample___a_createpattern_example
 function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
 
   // 新しい画像オブジェクトを生成して、パターンとして使用する
   const img = new Image();
-  img.src = "canvas_createpattern.png";
+  img.src = "canvas_create_pattern.png";
   img.onload = () => {
     // パターンを作成
     const ptrn = ctx.createPattern(img, "repeat");
@@ -700,11 +700,11 @@ function draw() {
 }
 ```
 
-```html hidden
+```html hidden live-sample___a_createpattern_example
 <canvas id="canvas" width="150" height="150" role="presentation"></canvas>
 ```
 
-```js hidden
+```js hidden live-sample___a_createpattern_example
 draw();
 ```
 

diff --git a/files/ja/web/api/canvas_api/tutorial/using_images/index.md b/files/ja/web/api/canvas_api/tutorial/using_images/index.md
@@ -189,7 +189,7 @@ function draw() {
       }
     }
   };
-  img.src = "rhino.jpg";
+  img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg";
 }
 ```
 
@@ -221,19 +221,27 @@ draw();
 以下の例では前の例と同じサイの画像を使用していますが、頭の部分を切り抜いて額縁の中に合成しています。額縁の画像は、ドロップシャドウを含む 24 ビット PNG 画像です。GIF や 8 ビット PNG 画像と異なり、24 ビット PNG 画像は 8 ビットのアルファチャンネルが含まれていますので、マットカラーに悩まされることなく背景に重ねることができます。
 
 ```html
-<html lang="en">
-  <body>
-    <canvas id="canvas" width="150" height="150"></canvas>
-    <div style="display:none;">
-      <img id="source" src="rhino.jpg" width="300" height="227" />
-      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
-    </div>
-  </body>
-</html>
+<canvas id="canvas" width="150" height="150"></canvas>
+<div style="display: none;">
+  <img
+    id="source"
+    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg"
+    width="300"
+    height="227" />
+  <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
+</div>
 ```
 
 ```js
-function draw() {
+async function draw() {
+  // すべての画像が読み込まれるまで待つ
+  await Promise.all(
+    Array.from(document.images).map(
+      (image) =>
+        new Promise((resolve) => image.addEventListener("load", resolve)),
+    ),
+  );
+
   const canvas = document.getElementById("canvas");
   const ctx = canvas.getContext("2d");
 
@@ -253,6 +261,7 @@ function draw() {
   // フレームを描く
   ctx.drawImage(document.getElementById("frame"), 0, 0);
 }
+
 draw();
 ```