How to (hack and) maximize Google Doc's Drawing Window to full screen?

Question

Friends of the Internets,

Google Docs's Intert Drawing tool works, except for the fact that it wastes half of all 16:9 screens, since it opens a forced-square window that is UNRESIZABLE, cripling all drawings that are intended for LANDSCAPE and/or PORTRAIT format! Think of all the standard formats like A4, A3, 16:9 monitors.

I've been asking this quetsion to super users, to no avail. NOBODY seems to know the answer! I'm resorting to skilled programmers to hack our way into this and am planning on opening a bounty worth 500 as soon as this this becomes available for this question! This is an essential yet overlooked potential portion of Google Docs that has been overlooked.

Any and all solutions that make this work in Google's own browser Chrome will be:

• Awarded 500 bounty points
• Accepted as answer

Answer 1

I think the simplest way is make a Chrome Extension Plugin for solve this problem. I made an example of how you should work, of course, a rudimentary but for the purpose is ok. Check it on github (Download the zip, unpack, go to chrome extensions and => "Load unpacked", enjoy :D). For more complex solutions you need to use google document api.

Example of code

document.addEventListener('DOMContentLoaded', function () {
    let fullScreenBtn = document.getElementById('fullScreenBtn');
    fullScreenBtn.onclick = function (element) {
        function modifyDOM() {
            function setToFullScreen(iteration, drawer) {
                drawer.style.left = '0';
                drawer.style.top = '0';
                drawer.style.borderRadius = '0';
                drawer.style.width = '100%';
                drawer.style.height = '100vh';

                document.getElementsByClassName('modal-dialog-content')[iteration].style.height = '100vh';

                var iframe = drawer.getElementsByTagName("IFRAME")[0]
                iframe.width = '100%';
                iframe.height = '100%';

                var canvas = iframe.contentWindow.document.getElementById('canvas-container');

                 canvas.style.borderLeft = 'solid 2px red';
                 canvas.style.borderRight = 'solid 2px red';

            }

            var drawers = document.getElementsByClassName('modal-dialog');
            let drawerCount = drawers.length;
            if (drawerCount) {
                for (let i = 0; i < drawerCount; i++) {
                    setToFullScreen(i, drawers[i]);
                }
            } else {
                alert('First off all open the drawer!')
            }
            return document.body.innerHTML;
        }

        chrome.tabs.query({ active: true }, function (tabs) {
            var tab = tabs[0];
            chrome.tabs.executeScript(tab.id, {
                code: '(' + modifyDOM + ')();'
            }, (results) => {
                // console.log(results[0]);
            });

        });
    };

If you want, you can resize the drawing canvas also, but if you do, it make some bugs (like @Anthony Cregan said) ... You can do with changing the code in this section

        var canvas = iframe.contentWindow.document.getElementById('canvas-container');

        canvas.style.left = '0';
        //canvas.style.position = ''; // works but in resizing elemnts bug 
        canvas.style.minWidth = '100%';

In action

Answer 2

I acheived this by opening in chrome, pressing F11 (fullscreen), F12 (console). I then navigated the dom in the Elements tab to:

#canvas-container

then set the element styles manually

left: 41px
width: 1787px

EDIT: unfortunately subsequent edits seem to reset the styles you enter manually, there may be a way to enforce these after subsequent draw actions but for now this solution is only good for displaying the end result, not drawing full-screen.

EDIT EDIT: you can enforce these by adding them to the element in the styles sidebar and maintain them with !important but this causes the draw functions to lose their co-ordinates (pen tool draws away from the pointer along the x-axis for instance).