canvasに画像が表示できない

Question

前提・実現したいこと

画像をキャンバスに表示させたいのですがうまくいきません。どなたか助言をいただけると嬉しいです。

発生している問題・エラーメッセージ

HTMLでは表示されるが、canvasの中には画像が表示されない。

該当のソースコード

  　<img class="pan" id="pan1" src="images/pan4.png">
    <canvas id="screen"></canvas>
 　　<script src="js/main_canvas.js"></script>

"use strict"
var canvas, ctx;
var pan;


window.onload = function() {
    canvas = document.getElementById('screen');
    ctx = canvas.getContext('2d');
    pan = document.getElementById('pan1');
    ctx.drawImage(pan, 20, 50);
};

試したこと

ctx.fillStyle,ctx.fillRectで描画はできました。

違う方法でも試したのですがうまくいきませんでした。

該当のソースコード

    <canvas id="screen" width="400" height="250"></canvas>
 　　<script src="js/main_canvas.js"></script>

window.onload = function() {
let cv = document.getElementById('screen');
let c = cv.getContext('2d');
/*c.strokeStyle ='#000';
c.fillStyle = '#0f0';
c.font = 'italic bold 40px serif';
c.textAlign = 'right';
c.fillText('aaaa',400,100);
c.strokeText('aaa',380,170);*/

let img = new Image();
img.setAttribute('src', '../images/pan4.png');
img.addEventListener('load', function(){
c.drowImage(this, 80,80,50,50);
},false);

コメントの記述のようにかいて文字は表示できたのですが、画像はうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

http://www.html5.jp/canvas/how6.html

ここを見てソースを見なおしてみてください

Comments

[mogumogu22]

画像サイズの問題のようでした！ctx.drawImageのサイズ指定を変更したら出てきました。
やりたいことに沿った回答いただけたので嬉しかったです。ありがとうございました。