JSFiddle - React, Tailwind, and code Playground

HTML

test left

<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%;
                position:relative;
            }

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

            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){
                    console.log("cwidth" + canvas.width);
                    console.log("cwidth" + canvas.height);
                    ctx.beginPath();
                    
                    var radius = 10;
                    ctx.fillStyle = "rgb(200,0,0)";

                    var actualX = e.pageX - canvas.getBoundingClientRect().left;
                    var actualY = e.pageY - canvas.getBoundingClientRect().top;
                    
                    var currentWidth = this.scrollWidth;
                    var currentHeight = this.scrollHeight;
                    
                    var the_x = canvas.width * actualX / currentWidth;
                    var the_y = canvas.height * actualY / currentHeight;
                    
                    ctx.arc(the_x, the_y, radius, 0, 2 * Math.PI, false);
                    
                    
                    ctx.fill();
                    ctx.closePath();

                    e.preventDefault();
                });