data-preserve-drawing-buffer

<mr-app data-preserve-drawing-buffer="true"> ... </mr-app>

Preserve-drawing-buffer state can be attached to an mr-app using data-preserve-drawing-buffer:

`preserve-drawing-buffer`

This enables the common html use-case of ‘right-click to save’ a png file of what’s on the screen.

Note: Most chromium-based browsers (chrome, duckduckgo, arc, etc…) have this feature by default making the use of this flag unnecessary

Allowing this as a feature the user toggles manually, because it causes a performance hit and isnt a strong requirement by default for most people who are interacting.


                    
                        
                        
                            Change color!


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        width: 100vw;
                        height: 100vh;
                    }
                    mr-button {
                        font-family: system-ui;
                        background-color: white;
                        padding: 8px 16px;
                        font-size: 150%;
                        border-radius: 20px;
                    }


                    function changeColor() {
                        let hue = Math.floor(Math.random() * 360);
                        let color = 'hsl(' +  hue + ', 100%, 80%)';
                        document.querySelector("#panel").style.backgroundColor = color;
                    }
                    changeColor();