Create Canvas Rendering.md (#29747)

* Create Canvas Rendering.md

* Fix canvas rendering page — rename to .mdx, add frontmatter, move image to local assets, fix headings and formatting

* Restore PM's performance statistics (10x, 30fps)

* Remove sidebar order — let product owner decide placement

---------

Co-authored-by: Cody Anthony <canthony@cloudflare.com>

Author: sonyekaba-cmyk

src/assets/images/cloudflare-one/remote-browser-isolation/canvas-rendering-context-menu.png

@@ -0,0 +1,79 @@
+---
+pcx_content_type: concept
+title: Canvas rendering
+sidebar: {}
+---
+
+import { Details } from "~/components";
+
+Canvas rendering is a Browser Isolation capability that optimizes performance for web applications using the HTML5 Canvas API. It sends vector draw commands to the client instead of rasterized bitmaps, reducing bandwidth consumption and improving frame rates for productivity applications.
+
+## How it works
+
+Browser Isolation uses Network Vector Rendering (NVR) to deliver efficient vector commands rather than rendered pixels. However, HTML5 Canvas content previously required server-side rasterization, sending large bitmaps for every frame.
+
+Canvas rendering extends NVR to Canvas-based applications by:
+
+1. Capturing draw commands made to the HTML5 Canvas element.
+2. Converting and sending those commands to the client as NVR instructions.
+3. Rendering the Canvas content on the client onto an offscreen texture.
+4. Compositing the texture into the final document output.
+
+## Supported applications
+
+Canvas rendering improves performance for productivity applications that rely on the HTML5 Canvas API:
+
+| Application                          | Improvement                                |
+| ------------------------------------ | ------------------------------------------ |
+| Microsoft Word                       | 10x bandwidth reduction                    |
+| Microsoft Excel                      | Smooth scrolling and data entry            |
+| Microsoft PowerPoint                 | Fluid animations                           |
+| Google Sheets                        | Consistent 30fps rendering                 |
+| Google Maps                          | Smooth panning and zooming                 |
+| Web-based terminals and AI notebooks | Fast and responsive text input and display |
+
+## Limitations
+
+Canvas rendering supports 2D Canvas contexts only. The following are not supported:
+
+- WebGL and WebGPU contexts
+- 3D graphics applications
+- Advanced Canvas features requiring GPU acceleration
+
+## Enable or disable canvas rendering
+
+Canvas rendering is on by default for all Browser Isolation customers. No configuration is required.
+
+![Canvas rendering context menu option](~/assets/images/cloudflare-one/remote-browser-isolation/canvas-rendering-context-menu.png)
+
+### Disable canvas rendering for the current session
+
+1. Right-click on the background of the isolated webpage.
+2. Select **Disable Canvas Rendering** from the context menu.
+
+### Re-enable canvas rendering
+
+1. Right-click on the background of the isolated webpage.
+2. Select **Enable Canvas Rendering** from the context menu.
+
+## Troubleshooting
+
+<Details header="Canvas content renders slowly">
+
+If Canvas-based applications appear choppy or consume excessive bandwidth:
+
+1. Verify canvas rendering is on by right-clicking the page background.
+2. Check that the context menu shows **Disable Canvas Rendering** (indicating it is active).
+3. If the issue persists, open a support case and provide the Ray ID from the error page.
+
+</Details>
+
+<Details header="Graphical glitches or missing elements">
+
+If Canvas content displays incorrectly after reconnecting from a network interruption:
+
+1. Refresh the isolated page.
+2. If the issue persists, select **Disable Canvas Rendering** from the right-click menu.
+3. Re-enable canvas rendering after the page reloads.
+
+</Details>