'How do I get a P5.js image into the DOM?

I want to get an internally created image file within P5.js (not loaded or from a url) into the DOM. I’m sure it’s really simple, but have no idea, thanks.

dom p5.js

Solution 1:^[1]

var img,src;
var imgh=new Image()
function setup() {
  createCanvas(400, 400);
  //draw something
  lsj(3, 3, 120);
  src=canvas.toDataURL()
  img=loadImage(src)
  imgh=select("#myimg")
  imgh.attribute('src', src); 
 
}
function draw(){
  background(frameCount%224,100)
  image(img,-frameCount%224,8)
  imgh.position(frameCount%524,8)
  
  
}
function lsj(k, l, n) {
  push()
  translate(width / 2, height / 2);
  stroke(0);
  noFill();
  for (let t = -n; t < n; t++) {
    ellipse(
      width/4 * cos((TWO_PI * k * t) / 150),
      height/4 * sin((TWO_PI * l * t) / 150),
      120,
      120
    );
  }
  pop();
}

html,body{
width:100%;
margin:0,auto;
text-align: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

    <meta charset="utf-8" />
  </head>
  <body>
    <img style="background-color:#ddd0;" id="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Ranunculus_glaberrimus_labelled.jpg/330px-Ranunculus_glaberrimus_labelled.jpg">
  </body>
</html>

var img,src;
var imgh=new Image()
function setup() {
  createCanvas(400, 400);
  //draw something
  lsj(3, 3, 120);
  src=canvas.toDataURL()
  imgh=select("#myimg")
  imgh.attribute('src', src); 
  frameRate(16)
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user2441635

'How do I get a P5.js image into the DOM?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]