export function drawCompositionFrame(context, webglCanvas, overlayCanvas, width, height) {
  context.fillStyle = '#000';
  context.fillRect(0, 0, width, height);
  context.drawImage(webglCanvas, 0, 0, width, height);
  context.drawImage(overlayCanvas, 0, 0, width, height);
}

export function presentWebGlBehindOverlay(
  context,
  webglCanvas,
  width,
  height,
) {
  context.save();
  context.globalAlpha = 1;
  context.globalCompositeOperation = 'destination-over';
  context.drawImage(webglCanvas, 0, 0, width, height);
  context.restore();
}

export function captureCompositionDataUrl(
  documentTarget,
  webglCanvas,
  overlayCanvas,
  type = 'image/jpeg',
  quality = 0.85,
) {
  const canvas = documentTarget.createElement('canvas');
  canvas.width = webglCanvas.width;
  canvas.height = webglCanvas.height;
  const context = canvas.getContext('2d');
  drawCompositionFrame(context, webglCanvas, overlayCanvas, canvas.width, canvas.height);
  return canvas.toDataURL(type, quality);
}
