Как загрузить изображение и сделать его фоном в p5.js

Question

Я просто хочу задать простой вопрос, как мне загрузить изображение и сделать его фоном на моем холсте html5

var bg;

function setup() {
  createCanvas(600,400)
  bg = loadImage("https://mcdn.wallpapersafari.com/medium/1/92/T1iecJ.jpg")
}

function draw() {
  background(bg)
}

Я попробовал этот метод, но на экране отображается только белый экран, яя ищу его, но я не могу найти решение.

Answer 1

loadImage не загружает изображение synchronously. Изображение может быть не сразу доступно для рендеринга.

Используйте функцию preload(), чтобы убедиться, что изображение загружается до выполнения draw(). setup будет ожидать завершения любых вызовов загрузки в preload().

var bg;

function preload(){
    bg = loadImage("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg")
}

function setup() {
    createCanvas(600,400)
}

function draw() {
    background(bg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>