html p5 绘制图片,javascript - Drawing p5.js canvas inside a html canvas using drawImage() - Stack Overfl...

the p5.js canvas is a special p5.js object. if you console.log(yourp5canvas) you'll notice that it outputs a d.Renderer2D object, and does store the actual HTMLcanvas and HTMLcanvas context within the p5js object.

here's a jsfiddle of how to copy the p5 canvas onto a html canvas. the html canvas has a black border.

the dimensions are a little odd after moving it to the new canvas, but hopefully you can mess around with it and figure it out.

good luck! :)

function setup() {

var HTMLcanvas = document.getElementById("my-canvas");

var HTMLcontext = HTMLcanvas.getContext("2d");

var canvas1 = createCanvas(200, 200);

console.log(canvas1);

//gives you "d.Renderer2D" object

var real_canvas = canvas1.canvas;

background(200);

text("p5.js canvas", 10, 10);

HTMLcontext.drawImage(real_canvas, 0, 0);

}