オンラインエディタに画像はアップロードできたでしょうか？

それでは実際にコードを書いて背景画像を設定していきます。

まずは、画像データを保持するための変数を用意します。

変数とは、データを保持しておくための箱のようなものです。
変数について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
変数とは - 入門コース

オンラインエディタの一番上の行に、次のコードを追加してください。

let skyImage;

画像データを保持するための変数 skyImage を宣言しました。

次に、 setup 関数を次のように変更してください。
（setup 関数について詳しく知りたい方は次の入門コースをご覧ください： 最初のコードの解説 - 入門コース ）

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
  skyImage = loadImage("sky.jpeg");
}

以下のコードを追加しています。

imageMode(CENTER);
skyImage = loadImage("sky.jpeg");

コードを解説します。

imageMode(CENTER);

まずこちらのコードは、座標を中心として画像を描画するという意味になるのですが、あまり重要な部分ではないので、ここではいったん「そんなものか」と思って先に進んでもらっても大丈夫です。

skyImage = loadImage("sky.jpeg");

この部分で、変数 skyImage にアップロードした画像をセットしました。

次に、draw 関数を次のように変更してください。
（draw 関数について詳しく知りたい方は次の入門コースをご覧ください： 最初のコードの解説 - 入門コース ）

function draw() {
  image(skyImage, 200, 200, 400, 400);
}

これで、変数 skyImage に格納されている画像が描画されるようになります。
画像を描画するには image を使います。
次のように使います。

image(画像の変数, X座標, Y座標, 横幅, 縦幅)

今回は、ゲーム画面のサイズが400×400で、
画像を画面いっぱいに描画させたいので、
(X座標, Y座標) = (200, 200) ←真ん中
(横幅, 縦幅) = (400, 400)
に設定しています。

コードの変更は以上になります。
無事にコードを書けたでしょうか？
よくわからなくなってしまった方は、このページ下部にコード全文を載せていますので、確認してみてください。

それではゲームを起動してみましょう。

ゲームの背景画像が設定されました！