57029


p5.jsを使って画像の読み込みと貼り付けをしようと思ったのですが、失敗してしまいます。  
原因がわかりません。どなたかのご回答をお待ちしております。

## 環境

・PC：mac  
・ブラウザ：chrome  
・ソースはダウンロードせず、p5.min.jsを外部から読み込んで使用しています。  
・サンプルとなる画像は同じディレクトリ内にあります。

## コード

[code]

    let img;
    function preload() {
        img = loadImage("sample.jpg");   // <-- 
    }
    function setup(){
        let canvas = createCanvas(600, 600);
        canvas.parent('canvas');
        fill(240);
        noStroke();
        background('#002B40');
        // 画像を貼り付け
        image(img, 100, 100);    // <--
        text("あ", 100, 100);
    }
    
    function draw(){
        textSize(32);
        text("ああああ", 300, 300);    
    }
    
[/code]


CC BY-SA 4.0
2019-07-30T07:08:46.860
57025
2019-07-30T08:21:32.663
2019-07-30T07:21:07.317
3060
35305
question
javascript processing
p5.jsを利用した画像の読み込みと貼り付けに関する質問


以下のいずれかに該当する場合は動作しません。  
確認してみてください。

  * htmlファイルに`id="canvas"`が存在しない  
公式リファレンスにある[parent()](https://p5js.org/reference/#/p5.Element/parent)のExampleサンプルコードにあるコメントを参照

  * [ローカルサーバ](https://github.com/processing/p5.js/wiki/Local-server)を立てずに`index.html`をローカルファイルとしてChromeで開いている

pythonでローカルサーバを立て、下記の`index.html`を配置して正しく動作することを確認しました。  
※質問文のコードは変更せず、`sketch.js`として`index.html`と同一階層に保存しています。

### index.html

[code]

    <html>
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
        <script src="sketch.js"></script>
      </head>
      <body>
        <p>hoge fuga</p>
        <div id="canvass"></div>
      </body>
    </html>
    
[/code]


CC BY-SA 4.0
2019-07-30T08:21:32.663
57029
2019-07-30T08:21:32.663
9820
57025
answer