JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="window.print();" class="no-print">Print Canvas</button>
    <div class="myDivToPrint">
      <div class="Aligner-item">
    <canvas height="2500px" width="4000px" id="canvas1"></canvas>
      <div class="printOnly Aligner-item--bottom"> Print Only</div>
    </div>

    </div>

CSS

canvas{
      border:1px dotted;
    }

    .printOnly {
       display : none;
    }



    @page {
      size: 4050px 2550px;
      margin: 0;
    }


    @media print {
       html, body {
         height: 100%;
         background-color: yellow;
        }
      
      
        .myDivToPrint {
            background-color: yellow;
        
            /*
            height: 100%;
        
            width: 100%;
            position: fixed;*/
            top: 0;
            left: 0;
            margin: 0;
      }
      
      .no-print, .no-print *
        {
            display: none !important;
        }
       .printOnly {
        
           display : block;
        
        }
      
    }

    @media print and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     html, body {
            height: 100%;
         background-color: yellow;
        }
      
      
        .myDivToPrint {
            background-color: yellow;
        
            /*
            height: 100%;
        
            width: 100%;
            position: fixed;*/
            top: 0;
            left: 0;
            margin: 0;
            padding: 15px;
            font-size: 14px;
            line-height: 18px;
          position: absolute;
          
          display: flex;
      align-items: center;
      justify-content: center;
           -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
          
        }
      
      .no-print, .no-print *
        {
            display: none !important;
        }
       .printOnly {
        
           display : block;
        
        }
      
    }

JavaScript

var canvas = document.getElementById("canvas1");
    function draw_a() {
      var context = canvas.getContext("2d");
    //   //  LEVER

    //plane
    context.fillStyle   = '#aaa';
    context.fillRect  (25, 90, 2500, 400);


    } 

    $(document).ready(function(){
      draw_a();
      
    });