I just want to ask a simple question, how do I load an image and make it as a background in my html5 canvas

var bg;

function setup() {
  createCanvas(600,400)
  bg = loadImage(".jpg")
}

function draw() {
  background(bg)
}

i tried that method but the screen only showing whitescreen, i've search for it but i can't get the solution.

I just want to ask a simple question, how do I load an image and make it as a background in my html5 canvas

var bg;

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

function draw() {
  background(bg)
}

i tried that method but the screen only showing whitescreen, i've search for it but i can't get the solution.

• javascript
• processing
• p5.js

1 Answer 1

loadImage doesn't load an image synchronously. The image may not be immediately available for rendering.

Use the preload() function, to ensure that the image is load before draw() is executed. setup will wait until any load calls within preload() have finished.

var bg;

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

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

function draw() {
    background(bg)
}

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