JSFiddle - React, Tailwind, and code Playground

HTML

<p style="border:2px solid black;">test sdhGJAHSDJGKHASKJDFGHKJADFHGJKLADHFGJKLHDAFJKGHADK;JFGHLJ;ADFHGJLADFHGJADHF;GJHDAFGJLHADFJGHADJK;FGHJKDAFHGJKADFHGJKDFHGJKDFH;GJKDFHGJKDFHGJKHDFGJKHADFKGJHADFJKGHKJDFGH</p>
<p>qwerty</p>
<p>qwerty</p>
<p>qwerty</p>
<p>qwerty</p>
<p>qwerty</p>
<p>qwerty</p>

JavaScript

// Create a blank div where we are going to put the canvas.
    var canvasContainer = document.createElement('div');
  
    canvasContainer.style.position="absolute";
    // Set to 100% so that it will have the dimensions of the document
    canvasContainer.style.left="0px";
    canvasContainer.style.top="0px";
    canvasContainer.id="CC"
    var D = document;
    height =  Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );

    canvasContainer.style.width=Math.max(document.getElementsByTagName("BODY")[0].scrollWidth,window.innerWidth)+"px";
    canvasContainer.style.height=height+"px";
    // Set to high index so that this is always above everything else
    // (might need to be increased if you have other element at higher index)
    canvasContainer.style.zIndex="1000";

    // Now we create the canvas
    canvas = document.createElement('canvas');
    canvas.style.width = Math.max(document.getElementsByTagName("BODY")[0].scrollWidth,window.innerWidth)+"px";
    canvas.style.height = height+"px";
    // You must set this otherwise the canvas will be streethed to fit the container
    canvas.width=Math.max(document.getElementsByTagName("BODY")[0].scrollWidth,window.innerWidth);
    canvas.height=height
    canvas.style.overflow = 'visible';
    canvas.style.position = 'absolute';
    canvas.style.display="initial";
    //Temp
    canvas.style.pointerEvents="none";
    canvasContainer.style.pointerEvents="none";
      canvas.style.border= "1px solid red"
    // Add int into the container
    

var ctx = canvas.getContext('2d');
var ratio   = window.devicePixelRatio || 1;
var img = new Image();

canvas.style.width  = canvas.width + "px";
canvas.style.height = canvas.height + "px";



canvas.width  *= ratio;
canvas.height *= ratio;


img.onload = function () {
  ctx.scale(ratio, ratio);
 ...