Saving triggers canvas to re-draw above current artwork?

[a-rbsn]

I'm not quite sure if this is me using the tool in the wrong way — I am just working my way through https://generativeartistry.com and it seems that when I save, the artwork gets redrawn on top of the previous canvas, then saves this double-exposure.

Is it something to do with the for loops included in the return?

My code is as follows:

const canvasSketch = require("canvas-sketch");
const { lerp } = require("canvas-sketch-util/math");
const random = require("canvas-sketch-util/random");

const settings = {
  dimensions: [1000, 1618]
};

const sketch = () => {
  const step = 50;
  const lines = [];
  return ({ context, width, height }) => {
    context.fillStyle = "white";
    context.fillRect(0, 0, width, height);
    context.lineWidth = 10;

    // Create the lines
    for (let i = step; i <= height - step; i += step) {
      const line = [];
      for (let j = step; j <= width - step; j += step) {
        const offset = Math.random() * 50;
        const point = { x: j, y: i + offset };
        line.push(point);
      }
      lines.push(line);
    }
    console.log(lines);
    // Draw the lines
    for (let i = 0; i < lines.length; i++) {
      console.log("why");
      context.beginPath();
      context.moveTo(lines[i][0].x, lines[i][0].y);
      console.log(lines[i].length);
      for (let j = 0; j < lines[i].length; j++) {
        context.lineTo(lines[i][j].x, lines[i][j].y);
      }
      context.stroke();
    }
  };
};

canvasSketch(sketch, settings);

[mattdesl]

Hey @andrwrbnsn, hitting Cmd + S will trigger a re-render as some application props are changed during that keystroke.

It's best if your render function is a 'pure' function, i.e. each time you call it with the same inputs, it results in the same rendered output. This is a bit similar to React/Vue/etc. In your case, you will need to move Math.random() outside the render function.

See here:
https://github.com/mattdesl/canvas-sketch/blob/master/docs/hello-world.md#props--state

Past discussion:
#51 (comment)

[mattdesl]

One more note — right now your render function is adding to a lines array, so each time the canvas render, the lines array will grow again and again.

The best option is to move your logic outside of the rendering function (to where you have lines defined) so that the 'generative' structure is created only once, and then rendered multiple times.

[a-rbsn]

Hi @mattdesl thanks for such a quick and detailed reply, this makes a lot of sense. Thanks for all your work on the workshop also, very helpful.