[GSoD] docs: revised offscreen rendering page

docs/tutorial/offscreen-rendering.md

@@ -1,59 +1,66 @@
 # Offscreen Rendering
 
-Offscreen rendering lets you obtain the content of a browser window in a bitmap,
-so it can be rendered anywhere, for example on a texture in a 3D scene. The
-offscreen rendering in Electron uses a similar approach than the [Chromium
+## Overview
+
+Offscreen rendering lets you obtain the content of a browser window in a
+bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene.
+The offscreen rendering in Electron uses a similar approach than the [Chromium
 Embedded Framework](https://bitbucket.org/chromiumembedded/cef) project.
 
-Two modes of rendering can be used and only the dirty area is passed in the
-`'paint'` event to be more efficient. The rendering can be stopped, continued
-and the frame rate can be set. The specified frame rate is a top limit value,
-when there is nothing happening on a webpage, no frames are generated. The
-maximum frame rate is 60, because above that there is no benefit, only
-performance loss.
+There are two rendering modes that can be used (see the section below) and only
+the dirty area is passed to the `paint` event to be more efficient. You can
+stop/continue the rendering as well as set the frame rate. The specified frame
+rate is a top limit value, when nothing happening on a webpage, no frames are
+generated. The maximum frame rate is 60 because greater values bring only
+performance losses with no benefits.
 
-**Note:** An offscreen window is always created as a [Frameless Window](../api/frameless-window.md).
+An offscreen window is always created as a
+[Frameless Window](../api/frameless-window.md).
 
-## Rendering Modes
+### Rendering Modes
 
-### GPU accelerated
+#### GPU accelerated
 
 GPU accelerated rendering means that the GPU is used for composition. Because of
-that the frame has to be copied from the GPU which requires more performance,
-thus this mode is quite a bit slower than the other one. The benefit of this
-mode is that WebGL and 3D CSS animations are supported.
+that, the frame has to be copied from the GPU which requires more performance,
+thus this mode is slower than the Software output device.
+
+Benefits: support of WebGL and 3D CSS animations.
 
-### Software output device
+#### Software output device
 
 This mode uses a software output device for rendering in the CPU, so the frame
-generation is much faster, thus this mode is preferred over the GPU accelerated
-one.
+generation is much faster. As a result, this mode is preferred over the GPU
+accelerated one.
 
-To enable this mode GPU acceleration has to be disabled by calling the
+To enable this mode, GPU acceleration has to be disabled by calling the
 [`app.disableHardwareAcceleration()`][disablehardwareacceleration] API.
 
-## Usage
+## Example
 
-``` javascript
+Starting with a working application from the
+[Quick Start Guide](quick-start.md), add the following lines to the
+`main.js` file:
+
+```javascript
 const { app, BrowserWindow } = require('electron')
+const fs = require('fs')
 
 app.disableHardwareAcceleration()
 
 let win
 
 app.whenReady().then(() => {
-  win = new BrowserWindow({
-    webPreferences: {
-      offscreen: true
-    }
-  })
+  win = new BrowserWindow({ webPreferences: { offscreen: true } })
 
   win.loadURL('http://github.com')
   win.webContents.on('paint', (event, dirty, image) => {
-    // updateBitmap(dirty, image.getBitmap())
+    fs.writeFileSync('ex.png', image.toPNG())
   })
-  win.webContents.setFrameRate(30)
+  win.webContents.setFrameRate(60)
 })
 ```
 
+After launching the Electron application, navigate to your application's
+working folder.
 [disablehardwareacceleration]: ../api/app.md#appdisablehardwareacceleration