Создание холста в JavaScript на основе переменных (с p5.js)

Question

Я хочу нарисовать простой холст на основе переменных.

Это работает так:

function setup() { 
    createCanvas(600, 600); 
    background(50); 
} 

Почему это не работает? (отображается небольшой холст, определенно не 600x600):

var height = 600; 
var width = 600; 

function setup() { 
    createCanvas(height, width); 
    background(50) 
} 

Я ценю любую помощь!

Answer 1

Это не работает, потому что height и width являются встроенными именами переменных p5. Попробуйте переименовать их в нечто другое.

var a = 600; 
var b = 600; 

function setup() { 
    createCanvas(a, b); 
    background(50) 
} 

Если вы хотите, чтобы сделать холст размер окна, вы должны использовать windowWidth и windowHeight.

function setup() { 
    createCanvas(windowWidth, windowHeight); 
} 

Чтобы изменить размер холста после установки вы должны сделать что-то вроде этого:

var c; 

function setup() { 
    c = createCanvas(windowWidth-20, windowHeight-20); 
} 

function draw() { 
    background(30); 
} 

function mousePressed() { 
    c.size(windowWidth-20, windowHeight-20); 
    console.log(width + " " + height); 
} 

Answer 2

Из того, что я узнал для p5.js библиотеки, я считаю, что переменная width и height являются выделенные для холста, созданные createCanvas(), и являются системными переменными, и переименование этой переменной, скорее всего, решит проблему.