背景画像を表示した上でマウス入力も前面に表示させたい

Question

前提・実現したいこと

画像の上にマウスクリックでお絵描きできるツールを作成しています。
draw()関数でマウスクリックで三角形を表示させる方法はできたのですが、背景画像もdraw();関数で表示させようとすると、三角形を表示できなくなってしまいます。プログラミングには２週間前に触れ始めたばかりの初心者なのですが、授業課題で作らねばならないので助けていただけると嬉しいです（；；）

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

エラーメッセージは出ていません

該当のソースコード

var img;  // Declare variable 'img'.
var overBox = false;
var locked = false;

function setup() {
  createCanvas(1000, 713);
  img = loadImage("Layout2-2.png"); // Load the image
  
  
 smooth();
}
 
function draw() {
  
  if( mouseIsPressed ) {
    //塗りつぶしなしに設定
    noFill();
    //三角形を描画する
    triangle(mouseX, mouseY, mouseX-20, mouseY+31, mouseX+20, mouseY+31 );
    
  }
  
  image(img,0, 0, 1000, 713)
  
}


function keyPressed() {
  if (keyCode === ENTER) {
   link("https://editor.p5js.org/mia-houkiboshi/present/LzKEmPHam");
  
}
  
}
  
function link(url, winName, options) {
  winName && open(url, winName, options) || (location = url);
  
  
  
}

試したこと

image関数の位置をずらす

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

p5*js

Answer 1

image()を毎回呼び出しており，image()の処理がわからないのですが，毎回三角形を書いた後にその上に画像を書いているように見えます。
背景画像はsetup()で最初に1回だけ表示するのでいいのではないでしょうか。
ソースコード全体がないので実際に動くかはわからないですが，以下のような感じでいけるかと思います。

var img;  // Declare variable 'img'.
var overBox = false;
var locked = false;

function setup() {
  createCanvas(1000, 713);
  img = loadImage("Layout2-2.png"); // Load the image
  image(img, 0, 0, 1000, 713);  // 最初に背景画像を描画する
  smooth();
}

function draw() {
  if( mouseIsPressed ) {
    //塗りつぶしなしに設定
    noFill();
    //三角形を描画する
    triangle(mouseX, mouseY, mouseX-20, mouseY+31, mouseX+20, mouseY+31 );
  }
}


function keyPressed() {
  if (keyCode === ENTER) {
   link("https://editor.p5js.org/mia-houkiboshi/present/LzKEmPHam");
  }
}

function link(url, winName, options) {
  winName && open(url, winName, options) || (location = url);
}