Canvasに画像が表示されません

###実現したいこと
Canvasに画像を表示させたいです。

###試したこと
js

var img = new Image();
var Draw;
var draw;


Draw = function() {
ctx.drawImage(img, 0, 0);
};

img.src = "img/logo.PNG";
img.addEventListener("load", function() {
stage = new Stage();
stage.update();
draw = new Draw();

###現象
画像が表示されません。
設定したCanvasの内容は表示されています。

###エラーメッセージ
DevToolで確認しましたが、エラーメッセージはありません。

原因が分かりません。アドバイスいただけないでしょうか。

以上、ご確認お願いいたします。

###追記

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Interactive Art</title>
  <style>
  canvas {
      background: black;
  }
  </style>
</head>
<body>
  <canvas id="mycanvas" width="500" height="250">
    Canvasに対応したブラウザを使ってください。
  </canvas>

  <script>
  var img = new Image();

    img.onload = (function(){

       var canvas = document.getElementById('logo');

       // var ctx = canvas.getContext('2d');

       ctx.drawImage(img, 0, 0);
    });

    img.src = "logo.PNG";
  </script>
</html>

上記のコードを追記した結果、リロードするタイミングで一瞬だけ画像が表示されますが、すぐに消えてしまう現象に陥っております。

defghi1977

2017/12/07 10:15

コードはエラーが出ても良いので実行可能なものを提示して下さい.

masaya_ohashi

2017/12/08 01:40

ctxはどこから出てきた変数ですか？あとdraw = new Draw();より下のコードが切れています。できるだけ全部を貼り付けてください。

narururu

2017/12/08 04:42

お二方　追記しました。参考になれば幸いです。コード量が多く恐縮ですが、必要な情報かと思い、全て貼り付けました。

defghi1977

2017/12/08 05:03

>できているものをそのまま写した箇所確認しますが, どこかのサイトからコードをコピペしたということですか？

masaya_ohashi

2017/12/08 05:07

本当にこれで全部で、「エラーがない」と主張しているコードそのものですか？私の環境ではそもそもブラケットの数が合わずにエラーがでます。

narururu

2017/12/08 05:47

defghi1977さん、どっとインストールの「インタラクティブアートを作ろう」のレッスンででてくるコードを使っております。

narururu

2017/12/08 05:49

masaya_ohashiさん、コードを追記したためエラーが出ておりました。私の方でも、ブラケットの数が合わないエラーが表示されております。修正しますね。

defghi1977

2017/12/08 06:06

内容を見るにちょっとハイレベルなんだよな…コードの内容が理解できていないのであれば, それをいじっても全く勉強にはならないのね

narururu

2017/12/08 06:19

defghi1977さん、ご確認ありがとうございます。そうですよね。好奇心だけでチャレンジしてしまい、自分で書いたコードもロジックが曖昧な状態で書いていますので、できるわけないですよね。もう少し簡単なところから始めてみます。アドバイスありがとうございました。

masaya_ohashi

2017/12/08 08:01

「上記のコードを追記した結果」とありますが、このコード「だけ」で試さないと、正常に動いていないコードも同時に動くのでうまく出来ているかの判断はつかなくなります。

masaya_ohashi

2017/12/08 08:44

コードを修正してもらったようですが、エラーが2つあります。document.getElementById('logo');とされていますが、canvasのIDはlogoではなくmycanvasです。また、ctxをgetContextする行がコメントアウトされているので、ctx.drawImageでもエラーが起きます。

defghi1977

2017/12/08 08:45

落ち着いて. 質問の内容は追記が基本で(致命的な間違い)でない限り消してはいけません. さもないと回答との整合性がおかしくなります. また, 追加されたコードには2箇所不味いところがあるので動きません.

narururu

2017/12/08 08:57

masaya_ohashiさん、defghi1977さん、ご指摘いただいた2点（logo→mycanvasへ修正/コメントアウトしていた行を解除）で一応画像が表示されました。あとは、本来取り込みたいファイルに展開してトライしてみます。アドバイスありがとうございます！

defghi1977

2017/12/08 09:12

canvasは動き始めるととても楽しくなるのでもう少しの辛抱です

narururu

2017/12/08 11:00

既存のファイルに今回のコードをマージすると上手く動作しませんでした。うーん、でも今回まっさらな状態で画像を表示させることはできたので、いろいろと整理して、また別途質問することにします。みなさん、アドバイスありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

コード的にあなたの技量が質問可能な域に達していませんが, canvas要素にimg要素の内容(つまりpngやjpeg画像)を描くには黄金パターンが存在するため, それを紹介します.

JavaScript
1"use strict";
2{
3  //(1)Image(HTMLImageElement)オブジェクトを生成します.
4  const image = new Image();
5  //(2)loadイベントにハンドラ関数を設定する.この中でimageの内容をcanvasに転写する
6  image.onload = function(e){
7    //(3)canvas要素を生成する
8    const canvas = document.createElement("canvas");
9    //(4)canvasグラフィックのサイズを設定する. ここでは画像のサイズに合わせている.
10    canvas.width = image.naturalWidth;
11    canvas.height = image.naturalHeight;
12    //(5)canvasグラフィックを描くためのコンテキストオブジェクトを取得する.
13    const ctx = canvas.getContext("2d");
14    //(6)canvas要素にimageオブジェクトの内容を転写する.
15    ctx.drawImage(image, 0, 0);
16  };
17  //(7)画像読み込み完了時の処理が定義されたので, 画像の読み込みを開始する.
18  image.src = "logo.png";
19}