Problem sizing an url img to fill the webpage using p5.js

Hello everyone,

  On a scale from 1 to 10, I am a 1 in javascript and new to p5.js and so on.

So I am using p5.js and following Daniel Shiffman tutorial on youtube. I imported an image from mapbox using an url and want it to fill in the webpage on every other pc, without it losing quality

My code is as follow:

var mapimg;

function preload(){
  mapimg = loadImage(‘https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,1,0,0/1024x512?access_token=pk.eyJ1IjoiY29kaW5nLXdhZ29uIiwiYSI6ImNqb240MmNzcDE0M2Yza3FhYzhyNHR5eGQifQ.QkoiEPFZPM-_DHo_-o_XMw’)
}

function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  cnv.style(‘display’, ‘block’);
  image(mapimg, 0, 0, windowWidth, windowHeight);
}

function draw() {

}

The 1024x512 in the URL stand for the pixel size.

And this is the link tot he page from where I got the url in the section Static --> Retrieve a startic map from a style:  https://www.mapbox.com/api-documentation/?language=cURL#retrieve-a-static-map-from-a-style

Can you tell us what is going wrong exactly? Is the image not there, is it too large, cropped, etc. ?

Also, you did make sure that windowWidth and windowHeight are valid variables that are correct? Try outputting them to the console with console.log() and check them for correctness.

Next time, consider posting your code in a code block. It makes it much easier to read.