JSFiddle - React, Tailwind, and code Playground

HTML

<ul role="layout">
            <li class="canvas">
                <canvas id="paint_zone"></canvas>
            </li>
            <li class="menu">
                <ul class="buttons">
                    <li>Menu1</li>
                    <li>Menu1</li>
                    <li>Menu1</li>
                    <li>Menu1</li>
                    <li>Menu1</li>             
                    <li>Menu1</li>
                    <li>Menu1</li>
                    <li>Menu1</li>             
                    <li>Menu1</li>
                    <li>Menu1</li>                   
                    <li>Menu1</li>
                    <li>Menu1</li>             
                    <li>Menu1</li>
                    <li>Menu1</li>
                </ul>
            </li>
        </ul>

CSS

body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                display: flex;
            }

            ul[role="layout"] {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
                flex: 1 1 0%;
                background: pink;
            }

            ul[role="layout"] .canvas canvas {
                outline: 1px solid #000;
                width: 96%;
                margin: 2%;
            }

            ul[role="layout"] .canvas {
                flex: 1 1 0%;
                align-self: center;
            }

            ul[role="layout"] .menu {
                background: green;
                flex: 0 0 12rem;
            }

JavaScript

window.scroll(0, 1);

                var canvas = window.paint_zone;
                var ctx = canvas.getContext("2d");

                //canvas.style.height = window.body.scrollHeight - 32;
                var width = canvas.scrollWidth;
                var height = canvas.scrollHeight;
                canvas.width = width;
                canvas.height = height;

                canvas.addEventListener("mousemove", function(e){
                    ctx.beginPath();

                    var radius = 10;
                    ctx.fillStyle = "rgb(200,0,0)";
                    ctx.arc(e.clientX, e.clientY, radius, 0, 2 * Math.PI, false);
                    ctx.fill();
                    ctx.closePath();

                    e.preventDefault();
                });