Can this be used only to save the image in svg but still render it with canvas

[romain-granai]

As stated in the documentation, the svg rendering is slower, especialy with a lot of elements, is there a way to keep the rendering with canvas and still exporting in svg? Even if exporting is a little bit slower (time to convert the drawing into a svg), that's not really a problem, but it's way too slow on the rendering side and makes the app sometime unresponsive.

Thank you

[nkymut]

You can use the createGraphics() to create p5.Graphic objects for P2D and SVG renderers. Then, use the P2D instance for drawing on the canvas and the SVG instance for exporting.

let pg;
let svgWriter;

function setup() {
  createCanvas(400, 400);
  pg = createGraphics(width,height); //P2D
  svgWriter = createGraphics(width,height,SVG);
}

function drawSomething(pgInstance){
  pgInstance.fill(0);
  pgInstance.rect(100,100,200,200);
}

function draw() {
  background(220);
  drawSomething(pg);
  translate(width/2,height/2);
  rotate(frameCount/8);
  imageMode(CENTER);
  image(pg,0,0);
}

function mousePressed(){
  print("export svg")
  drawSomething(svgWriter);
  svgWriter.save("svgTest.svg");
}