yjbanov · December 14, 2021 01:08
diff --git a/disappearing_test.html b/disappearing_test.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="UTF-8">
  <title>Where's text?</title>
 </head>

 <body>
 <canvas id=foo width=300 height=300></canvas>

 <script type="text/javascript"
  src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>

 <script type="text/javascript">
 async function run() {
  let videoFrame = null;

  const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/[email protected]/bin/'+file});
  ckLoaded.then(async function(CanvasKit) {
    let robotoFetch = await fetch('https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf');
    let robotoData = await robotoFetch.arrayBuffer();
    const font = new CanvasKit.Font(null, 18);
    const fontPaint = new CanvasKit.Paint();
    fontPaint.setStyle(CanvasKit.PaintStyle.Fill);
    fontPaint.setAntiAlias(true);
    const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
    const surface = CanvasKit.MakeCanvasSurface('foo');
    const skcanvas = surface.getCanvas();

    function delay() {
      return new Promise((accept, reject) => {
        setTimeout(() => {
          accept();
        }, 3000);
      });
    }

    function drawFrame() {
      const paint = new CanvasKit.Paint();
      skcanvas.clear(CanvasKit.Color(0, 0, 0, 0.0));

      const paraStyle = new CanvasKit.ParagraphStyle({
        textStyle: {
          color: CanvasKit.BLACK,
          fontFamilies: ['Roboto'],
          fontSize: 16,
        },
        textAlign: CanvasKit.TextAlign.Left
      });

      const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
      builder.addText('This text should always be visible');
      let paragraph = builder.build();
      paragraph.layout(1000);
      skcanvas.drawParagraph(paragraph, 10, 10);

      if (videoFrame) {
        let imageInfo = {
          alphaType: CanvasKit.AlphaType.Premul,
          colorType: CanvasKit.ColorType.RGBA_8888,
          colorSpace: CanvasKit.ColorSpace.SRGB,
          width: videoFrame.displayWidth,
          height: videoFrame.displayHeight
        };
        let image = CanvasKit.MakeLazyImageFromTextureSource(videoFrame, imageInfo);
        skcanvas.drawImage(image, 10, 40);
      }

      surface.flush();
    }

    console.log('Frame 1: text only - text visible');
    drawFrame();
    await delay();

    console.log('Frame 2: text + image - text invisible');
    let imgResponse = await fetch('/assets/images/penguin.png');
    let testImage = await imgResponse.arrayBuffer();
    let decoder = new ImageDecoder({
      type: 'image/png',
      data: testImage,
      premultiplyAlpha: 'premultiply',
      colorSpaceConversion: 'default',
      preferAnimation: true
    });
    await decoder.tracks.ready;
    await decoder.completed;
    let decodeResult = await decoder.decode({frameIndex: 0});
    videoFrame = decodeResult.image;
    drawFrame();
    await delay();

    console.log('Frame 3: text + image again - text visible again');
    drawFrame();
  });
 }
 run();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Where's text?</title>
	</head>

	<body>
	<canvas id=foo width=300 height=300></canvas>

	<script type="text/javascript"
	src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>

	<script type="text/javascript">
	async function run() {
	let videoFrame = null;

	const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/[email protected]/bin/'+file});
	ckLoaded.then(async function(CanvasKit) {
	let robotoFetch = await fetch('https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf');
	let robotoData = await robotoFetch.arrayBuffer();
	const font = new CanvasKit.Font(null, 18);
	const fontPaint = new CanvasKit.Paint();
	fontPaint.setStyle(CanvasKit.PaintStyle.Fill);
	fontPaint.setAntiAlias(true);
	const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
	const surface = CanvasKit.MakeCanvasSurface('foo');
	const skcanvas = surface.getCanvas();

	function delay() {
	return new Promise((accept, reject) => {
	setTimeout(() => {
	accept();
	}, 3000);
	});
	}

	function drawFrame() {
	const paint = new CanvasKit.Paint();
	skcanvas.clear(CanvasKit.Color(0, 0, 0, 0.0));

	const paraStyle = new CanvasKit.ParagraphStyle({
	textStyle: {
	color: CanvasKit.BLACK,
	fontFamilies: ['Roboto'],
	fontSize: 16,
	},
	textAlign: CanvasKit.TextAlign.Left
	});

	const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
	builder.addText('This text should always be visible');
	let paragraph = builder.build();
	paragraph.layout(1000);
	skcanvas.drawParagraph(paragraph, 10, 10);

	if (videoFrame) {
	let imageInfo = {
	alphaType: CanvasKit.AlphaType.Premul,
	colorType: CanvasKit.ColorType.RGBA_8888,
	colorSpace: CanvasKit.ColorSpace.SRGB,
	width: videoFrame.displayWidth,
	height: videoFrame.displayHeight
	};
	let image = CanvasKit.MakeLazyImageFromTextureSource(videoFrame, imageInfo);
	skcanvas.drawImage(image, 10, 40);
	}

	surface.flush();
	}

	console.log('Frame 1: text only - text visible');
	drawFrame();
	await delay();

	console.log('Frame 2: text + image - text invisible');
	let imgResponse = await fetch('/assets/images/penguin.png');
	let testImage = await imgResponse.arrayBuffer();
	let decoder = new ImageDecoder({
	type: 'image/png',
	data: testImage,
	premultiplyAlpha: 'premultiply',
	colorSpaceConversion: 'default',
	preferAnimation: true
	});
	await decoder.tracks.ready;
	await decoder.completed;
	let decodeResult = await decoder.decode({frameIndex: 0});
	videoFrame = decodeResult.image;
	drawFrame();
	await delay();

	console.log('Frame 3: text + image again - text visible again');
	drawFrame();
	});
	}
	run();
	</script>
	</body>
	</html>