Add Watermark to Canvas

/ / dynamic dimension const dynamicDateSize = function (size) {/ / return (375). The document body. The offsetWidth / * size; return (getClientW() / 375) * size } export function addWaterBack(text) { const width = window.screen.width || document.body.offsetWidth; const height = window.screen.height || document.body.clientHeight; let selector = document.querySelector("body"); let section = document.createElement("section"); const styleStr = ` position: fixed; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; z-index: 199999999; `; section.setAttribute('style', styleStr); section.style.background = `url(${_canvasToimg(width, height, text)})`; //section.classList.add("warter-back"); selector.appendChild(section); //selector.style.background = `url(${_canvasToimg(width, height, text)})`; } function _canvasToimg(width, height, text) { const width2 = width / 2; const height3 = height / 5; // Let sCanvas = document.createElement("canvas"); // Create the canvas tag sCanvas. Width2; // Set canvas size sCanvas. Height = height3; let ctx = sCanvas.getContext("2d"); CTX. FillStyle = "rgba (35,24,21,0.1)"; const fontSize = Math.min(Number(CommonJs.dynamicDateSize(12)).toFixed(0) || 12, 24); ctx.font = `${fontSize}px Arial`; ctx.rotate((-25 * Math.PI) / 180); Ctx. fillText(text, 0, height3/1.5); ctx.rotate((25 * Math.PI) / 180); // canvas let bCanvas = document.createElement("canvas"); bCanvas.width = width; bCanvas.height = height; let ctx1 = bCanvas.getContext("2d"); ctx1.clearRect(0, 0, width, height); let pat = ctx1.createPattern(sCanvas, "repeat"); // Duplicates the specified element ctx1.fillStyle = pat in the specified direction; ctx1.fillRect(0, 0, width, width); return sCanvas.toDataURL("image/png"); }