title: Onscreen Rendering as well as Offscreen Rendering of electron window
body: <p>I liked the <a href="https://www.electronjs.org/docs/tutorial/offscreen-rendering" rel="nofollow noreferrer">Offscreen Rendering</a> feature of electron app. I can render window content to image so easily with this feature.</p>
  <pre><code>const { app, BrowserWindow } = require('electron')
  const fs = require('fs')
  
  app.disableHardwareAcceleration()
  
  let win
  
  app.whenReady().then(() =&gt; {
    win = new BrowserWindow({ webPreferences: { offscreen: true } })
  
    win.loadURL('https://github.com')
    win.webContents.on('paint', (event, dirty, image) =&gt; {
      fs.writeFileSync('my_image.png', image.toPNG())
    })
    win.webContents.setFrameRate(60)
  })
  </code></pre>
  <p>By default <code>offscreen</code> is <code>false</code> so content renders on the screen.</p>
  <p>How can I see content of window <code>on screen</code> as well as <code>off screen</code>(image <code>my_image.png</code>) in such a way that when I perform some action on <code>window</code>(Onscreen) that should reflect on <code>my_image.png</code>(Offscreen) also?</p>