container 안에 문자가 반복해서 들어가게 하고싶습니다

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8" />        <title>title</title>        <style type="text/css">        #container {            position: absolute;            left: 50%;            top: 50%;            width: 20.0em;            height: 20.0em;            margin: -10.0em 0 0 -10.0em;            background-position: 80% 80%;            background-color: #fff;            border: 1px solid #f00;        }        </style>        <script type="text/javascript">        function backgroundText(text, width, height, angle) {            var rtn = null;            if (text !== undefined) {                var canvas  = document.createElement("canvas");                                if (width !== undefined) { canvas.width = width; }                if (height !== undefined) { canvas.height = height; }                                document.documentElement.appendChild(canvas);                var ctx = canvas.getContext("2d");                ctx.translate(canvas.width / 2, canvas.height / 2);                ctx.rotate(angle * Math.PI / 180);                                ctx.font = "1.0em Courier New";                ctx.textAlign = "center";                ctx.fillText(text, 0, 0);                rtn = canvas.toDataURL("image/png");                                document.documentElement.removeChild(canvas);            }            return rtn;        }                document.addEventListener("DOMContentLoaded", function () {            var dataurl = null;                        dataurl = backgroundText("Hello", 200, 200, -20);            document.body.style.backgroundImage = "url(" + dataurl + ")";            dataurl = backgroundText("How r u", 100, 100, -40);            document.getElementById("container").style.backgroundImage = "url(" + dataurl + ")";        }, false);        </script>            </head>    <body>        this is a body        <div id="container">this is a container in the body</div>    </body></html>