Issue with rendered canvas when using chromakey effect

[ghost]

I've been digging through the old questions on this trying to find a solution.

I did stumble upon this issue which recommended using reformat - example

But I'm struggling to get the rendered video to be 100% width / height whilst attempting this solution.

Below is my code.

var video;
var canvas;
var reformat;

function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  canvas.id('p5canvas');
  video = createCapture(VIDEO);
  video.size(620, 480);
  video.id('p5video');
  video.hide();

  reformat = createCanvas(windowWidth, windowHeight, WEBGL);
  reformat.id('reformat');

  var seriously = new Seriously();

  var src = seriously.source('#p5video');
  var target = seriously.target('#p5canvas');
  var reformat = seriously.transform("reformat");

  var chroma = seriously.effect('chroma');
  chroma.source = src;
  target.source = chroma;
  var r = 255 / 255;
  var g = 255 / 255;
  var b = 255 / 255;
  chroma.screen = [r,g,b,1];

  reformat.width = target.width;
  reformat.height = target.height;
  reformat.mode = 'cover';
  
  reformat.source = '#p5canvas';
  target.source = '#reformat';

  seriously.go();
}

[ghost]

I've also attempted targeting a canvas element in the DOM - but the rendered capture still seems to not fill the canvas element

[calleufuzi]

Hi! I had a same problem and with reformat solved my problem.

[calleufuzi]

try this

try this! I hope this help you

[Headstock67]

@calleufuzi

Super job!