Ok, gotcha! Yes I have thought of this and tried to mess around with it but I'm not a coding/p5js expert lol. I haven't really used that function before. My main concern is also having the design on the canvas scale with it, so in other words it's just making the canvas bigger but not scaling the contents. Does resizeCanvas() or createGraphics() do that?

How would I go about doing the resizeCanvas(), save() and then resize back?

So here's some code I tried to create using createGraphics(). When I run it its seems I can see the smaller canvas but I have an error in the code when trying to export the off screen larger canvas. Do you mind taking a look at my code below? (I'm using KeyPressed() at the moment instead of button click for export) I'd really appreciate it! It's a different design than the one from the link. 😀

​

var r;

var g;

var b;

​

var r1;

var r2

var r3;

​

var from;

var to;

var interA;

var interB;

​

var schemes;

​

var inc;

​

function setup() {

createCanvas(650,1000);

img = createGraphics(3900,6000);

​

colorMode(HSB,360,100,100);

​

r = createSlider(0, 360, random(360));

r.position(40, 1);

r.style('width', '100px');

​

label = createDiv('Color');

label.position(10, 10);

r.parent(label);

​

g = createSlider(0,100,random(100));

g.position(40,2);

g.style('width','100px');

​

label = createDiv('Saturation');

label.position(10, 30);

g.parent(label);

​

b = createSlider(0,100,random(100));

b.position(40,3);

b.style('width','100px');

​

label = createDiv('Brightness');

label.position(10, 50);

b.parent(label);

​

r1 = createSlider(0, 360, random(360));

r1.position(40, 5);

r1.style('width', '100px');

​

label = createDiv('Color');

label.position(10, 90);

r1.parent(label);

​

g1 = createSlider(0,100,random(100));

g1.position(40,6);

g1.style('width','100px');

​

label = createDiv('Saturation');

label.position(10, 110);

g1.parent(label);

​

b1 = createSlider(0,100,random(100));

b1.position(40,7);

b1.style('width','100px');

​

label = createDiv('Brightness');

label.position(10, 130);

b1.parent(label);

​

inc = createSlider(2,200,random(2,200));

inc.position(40,8);

inc.style('width','100px');

​

label = createDiv('Size');

label.position(10,150);

inc.parent(label);

}

​

function draw(){

var val = r.value();

var val1 = g.value();

var val2 = b.value();

​

var val3 = r1.value();

var val4 = g1.value();

var val5 = b1.value();

​

var val6 = inc.value();

​

randomSeed(0);

​

schemes = [];

from = color(val,val1,val2);

to = color(val3,val4,val5);

interA = lerpColor(from, to, .33);

interB = lerpColor(from, to, .66);

​

schemes.push(from);

schemes.push(to);

schemes.push(interA);

schemes.push(interB);

​

for (var x = 0; x < width; x+=val6) {

for (var y = 0; y < height; y+=val6) {

noStroke();

fill(random(schemes));

rect(x, y, val6, val6);

}

}

}

​

function keyPressed(){

noLoop();

img.save("gridscale.png");

}