JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel commodo purus. Mauris imperdiet elit sed libero sagittis dignissim. Pellentesque ultrices sodales erat, nec faucibus augue fringilla sit amet. Quisque tellus justo, adipiscing quis ultricies non, laoreet at lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sodales felis vel massa hendrerit ultricies. Curabitur in ligula nisi. Integer ultrices nunc et orci venenatis venenatis.</div>

CSS

canvas{display:none;width:50px;height:50px;}
div{width:400px;height:300px;border:1px solid grey;background-repeat:repeat-x;}

JavaScript

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

function assignToDiv(){ // this kind of function you are looking for
  dataUrl = canvas.toDataURL();
  document.getElementsByTagName('div')[0].style.background='url('+dataUrl+')'
}

function draw() { // replace with your logic
  ctx.fillStyle = "rgb(100, 250, 100)";
  ctx.fillRect (10, 10, 35, 30);
  ctx.fillStyle = "rgba(100, 250, 250, 0.5)";
  ctx.fillRect (30, 30, 35, 30);
}

draw()
assignToDiv()