Export doubles the frame on save about canvas-sketch HOT 2 CLOSED

Hey @TheMapSmith! Thanks for trying out canvas-sketch.

There are two things in your sketch causing some issues right now:

1. Your triangle function is adding lines to a path, but you never call context.beginPath() – this means you are always adding commands to one big shape object, even across renders.
2. Your render function is not a "pure" render function — each time it gets called, its resulting in a different visual output (because of the random values). So what you initially see in the browser won't look the same as the export.

To fix issue 1, you need to be careful to use context.beginPath() when you want to create a new shape:

function triangle(startX, startY, x1, y1, x2, y2) {
  context.fillStyle = 'green'
  // draw a triangle
  context.beginPath();
  context.moveTo(startX, startY);
  context.lineTo(x1, y1)
  context.lineTo(x2, y2)
  context.closePath()
  context.fill()
}

There are a number of ways to fix issue 2, but first you must understand why its being rendered multiple times:

When you hit Cmd + S, canvas-sketch will re-render your canvas and call your render function again. This is because some props may have changed (like the { exporting } prop), and depending on your settings the final export resolution may not match the browser resolution.

One easy solution is to use a seeded random – this means that the random numbers come in a predictable sequence that is the same across renders. It looks like this:

const sketch = () => {
  // First let's generate a totally random seed string
  const seed = random.getRandomSeed();

  return ({ context, width, height }) => {
    // Now, each time we render, reset the randomness to the above seed
    random.setSeed(seed);

    ... the rest of your rendering code ...
  };
};

Another solution is to separate the randomness/logic from your rendering code. Here is one example where the "geometry" is separated from the rendering. Since the data structure doesn't change between renders, it will appear the same even after you hit Cmd + S multiple times.

Yet another solution is to forgo a render function entirely (see here for an example), and move all of your code to the sketch setup. This means that it will only be rendered once into the canvas. This is a bit less stable – if something changes the width/height of the canvas, you may lose the contents, or if you are using certain features of canvas-sketch like units, higher resolution exporting etc then it may not resize correctly.

Hope that clears things up a bit! And nice sketch. 😄

from canvas-sketch.

Thanks for the detailed reply with examples, Matt. I realized after my edit last night as I was lying in bed that I also changed the context.beginPath() portion of my triangle() function, which probably accounted for the fix. Thanks again for all you do!

from canvas-sketch.