私は、IDが割り当てられていない動的に書き込まれたキャンバスを持っています。 JSを介して最初のキャンバス（複数のキャンバスのうち）にイメージをオーバーレイするにはどうすればよいですか？あなたは古き良き機能document.getElementsByTagName()を使用することができますjavascriptのプレーンを使用してDOMの第一キャンバスを得るためにキャンバスをキャンバスに重ねる方法は？
<canvas width="240" height="297">
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
。それから、あなたが望むことをしてください。
おそらく、間違ったキャンバス（jqueryセレクタがうまくいく）を避けるために、クラス名などの他の属性でもより安全に一致するでしょう。
ところで、以下は
<html>
<head>
<script>
var image = new Image();
image.onload = function(){//react on image download completed
//you can get the 1st canvas of the DOM accessing the array of canvas
var canvas = document.getElementsByTagName("canvas")[0];
//then draw on it as needed
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
};
//load image
image.src = "http://i.imgur.com/ITWfejd.png";
</script>
</head>
<body>
<canvas width="240" height="297"></canvas>
<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>
</body>
</html>
はありがとうござい動作するはずです。私はキャンバス上に描かれたイメージを見ません。 var image = new Image（）; image.src = "https://i.imgur.com/ITWfejd.png"; //キャンバスの配列にアクセスするDOMの1番目のキャンバスを取得できます var canvas = document.getElementsByTagName（ "canvas"）[0]; //必要に応じて描画します var context = canvas.getContext（ '2d'）; context.drawImage（image、1000,1000）; – Viru
これは、 'image.src = '...''がすぐに返されるためです：画像のダウンロードは非同期です。 早く呼び出すと、イメージが利用可能になるのを待たなければなりません。つまり、 'image.onload = ... 'のようなイベントリスナーを使用する必要があります。 本当にあなたのロジックに依存します。 を参照してください。https://stackoverflow.com/questions/2691301/async-or-sync-when-we-set-the-src-property-of-the-image-object –
例をフルHTMLドキュメントで展開しましたと 'onload'関数です。必要に応じて、特定のニーズに応じて移動することもできます。 1）onloadイベントリスナー関数がアタッチされた後に画像srcを設定する必要があります。 2）キャンバスはその時点で使用可能になっている必要があります。 –