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

Gomez

I do not have a solution but here is a workaround: Create a drawing separately in the standalone version of Google Drawings (which allows you to change the canvas size in File > Page Setup) and than insert the drawing into a Google Document by using Insert > Drawing > From Drive. – Assorted

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

Stump

Thanks for creating a plugin! Nice! Only problem is that the canvas (the checkerboard) is not expanded to full screen. Perhaps this can be implemented in your code with a third button "Full Screen Canvas". I am willing to give my bounty award. Would it be possible to expand the CANVAS too? Or impossible? – Gomez

Thanks. Nothing is impossible :) , but it takes a while, for searching what the function is responsible for resizing the canvas. Resize the "checkerboard" is simple with css, but it's not solve your problem, without resizing the canvas. In this script the answere (but this almost imposible to human read). Go to docs.google.com/drawings hit CTRL+U (view source) and its starts from line 75 to 273. Than unminify copied js code with unminify.com. This is the prerender document.getElementById("prerendered"). I think with css impossible, you need to edit the drawer js code :( – Stump

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).

Imperceptible

Answer 3

Boom! As you said it's a hack. But this works: F12->Console->Paste->Enter

let modal = document.getElementsByClassName("sketchy-dialog")[0];
modal.style.width="100%";
modal.style.height="100%";
modal.style.left="0px";
modal.style.top="0px";
let content = document.getElementsByClassName("modal-dialog-content")[0];
content.style.height="100%";
let iframe;
let iframes = document.getElementsByTagName("iframe");
for(let x=0;x<iframes.length;x++)
{
    let elem = iframes[x];
    if(elem.src.startsWith("https://docs.google.com/drawings"))
    {
        iframe = elem;
    }
}
iframe.style.width="100%";
iframe.style.height="100%";

Careerist

I was able to do the same but if you see the drawing canvas doesn't expand at all. Which doesn't help in any way i.sstatic.net/3I39P.png – Maxi

@TarunLalwani Well, I think it helps a little at least. You can see in OP that it doesn't take the whole height, so this will be as big as possible with the default drawing. – Careerist

@TarunLalwani thanks please add your suggestion as "a possible answer" just like all others. Since this is such an difficult thing to get perfect your note deserves at least an answer-upvote which I will promise to give once its enlisted here. – Gomez

Answer 4

I use this simple “hack” from console. Just open the drawing modal > press F12 > Click Console > and paste this following js.

modal = document.getElementsByClassName('modal-dialog');
frame = modal[0].getElementsByTagName('iframe');

modal[0].style.width = window.innerWidth+"px";
modal[0].style.height = window.innerHeight+"px";
modal[0].style.top = 0;
modal[0].style.left = 0;
frame[0].width = window.innerWidth;
frame[0].height = window.innerHeight;

Baier