アプリケーションを実装する際、外部ファイルの読み取りはよく行う操作の一つです。特にシステムに予め登録された ファイルではなく、ユーザが任意にファイル指定をするということがよくあります。例えば私が作ったオンラインセミナーの広報用壁紙簡易作成ツール（Easy Wall Banner Generator）では、ユーザからもらった画像で格子柄の広報用画像を生成させています。
このページではp5jsを利用して、このようなファイル操作を実現するための内容を記述しています。canvasにもらった画像を描く例はp5js公式でも動画と一緒に紹介されていますが、html側の要素と同時に扱う方法がありません。以下のサンプルは、画像ファイルをドラッグアンドドロップすると、その場所にドロップした画像を表示するプログラムです。画像をドロップすると、imgタグを新しく生成して、ドロップした画像を新たに表示しなおしています。コメントアウトしていますが、PImage型でもらいたい人は、その箇所を参考にしてください。