Is it possible to do double-buffering with a visible canvas and an invisible one?

[Nesh108]

I am trying to fix some awful flickering issues and normally one would create a tempCanvas to do all the drawing and then copy it to the real one.

I tried to hack something like that together but I am getting weird results. Is it even possible to do this?

Normally one would do this (from: https://stackoverflow.com/a/10357038/1214469):

// canvas element in DOM
var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

// buffer canvas
var canvas2 = document.createElement('canvas');
canvas2.width = 150;
canvas2.height = 150;
var context2 = canvas2.getContext('2d');

// create something on the canvas
context2.beginPath();
context2.moveTo(10,10);
context2.lineTo(10,30);
context2.stroke();

//render the buffered canvas onto the original canvas element
context1.drawImage(canvas2, 0, 0);

[iddan]

The canvas is rendered using an underlying WebView.

[Nesh108]

Ok but is there a way to create 2 canvases in the same webview to enable double-buffering? That might solve the flickering problems we encounter when making animations with this library.

…

On Sat, 26 Jun 2021, 22:10 Iddan Aaronsohn, ***@***.***> wrote: The canvas is rendered using an underlying WebView. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#220 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJRIAOIGGQXD7H77655S6TTUYXZ5ANCNFSM47GDQ5IA> .

[iddan]

Currently no, how do you imagine the solution to work like?

[Nesh108]

From the top of my head I'd say that there are 2 possible approaches:

1. Expose the 2nd canvas and let the user perform the double buffering with it
   Example:

import BufferedCanvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
  let realCanvas = canvas.main;
  let bufferCanvas = canvas.buffer;
  
  ....
  }

  render() {
    return (
      <BufferedCanvas ref={this.handleCanvas}/>
    )
  }
}

2. If the user enables it, each command is sent to the temp buffer and when a specific function is called, the contents are copied onto the real one.
   Example:

doStuffOnCanvas = () => {
// The user already has set `canvas.enableDoubleBuffering()`. All these commands go to the temporary canvas.
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
    
 // Now the user wants to move all the work done onto the main canvas
   canvas.copyFromBuffer();
}

The result would be roughly the same. The component exposing the 2nd canvas would require the user to do the double-buffering (nowadays that's often done by the browsers) while the one hiding it away would require the user to add 2 lines of code to their project (one enabling the feature and one to tell the buffer canvas to move their content to the main one).

I don't know if it is annoying to implement on your side but if you notice that this approach fixes flickering animations, I think it would be a great addition to the library. Let me know :)