Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas-based PDF embedded in rotated SVG element does not render correctly in Chrome

See original GitHub issue

Attach (recommended) or Link to PDF file here: I am using a publicly accessible PDF file (in this case, the PDF representation of the Wikipedia article on the HTML5 canvas) for the sake of demonstration because I couldn’t get Chrome to load a local PDF file via a relative URL for my minimal working example. In my real application, I tried this with a couple of different PDF files, though, and the result was always the same.

Configuration:

  • Web browser and its version: Chrome 74
  • Operating system and its version: Windows 10 x64
  • PDF.js version: 2.2.2
  • Is a browser extension: no

Steps to reproduce the problem:

  1. Create an HTML page.
  2. Insert some SVG data.
  3. Within that SVG data, apply a transform with a rotation.
  4. Within that transformed SVG fragment, add a <foreignObject> that contains a canvas.
  5. Use that canvas as a rendering target for PDF.js.

(From various resources associated with this project, my understanding is that the PDF-to-SVG renderer from PDF.js is not yet as mature and feature-complete as the canvas-based PDF renderer.)

Sample files: pdfjsCanvasInSvg.zip

What is the expected behavior? (add screenshot)

Firefox 66 displays test.html as expected:

correct display in Firefox

What went wrong? (add screenshot)

Chrome 74, on the other hand, displays an unexpected portion of the PDF document and does not apply the rotation:

problematic display in Chrome

Asking about this issue on StackOverflow has so far yielded a hint that it might be a quirk in how Chrome handles the canvas. However, if I draw something simple into the canvas myself rather than having PDF.js fill the canvas (cf. test_ok.html), Chrome does apply the rotation also to the canvas drawing:

correct display with simple canvas graphic in Chrome

This makes me wonder whether Chrome is behaving weirdly due to something specific PDF.js does while using the canvas. Is this a known issue?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
dbrotzcommented, May 16, 2019

I tried removing the use of PDF.js entirely and just modified the width and height with some simple code. It causes the same rendering issues in Chrome. It looks to me like this is a bug in Chrome.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<svg width="800" height="600">
<rect width="100%" height="100%" fill="rgb(186, 224, 255)"/>
<g transform="rotate(-30) translate(10, 20) scale(1.5)">
    <rect x="100px" y="50px" width="100px" height="80px" stroke="red" fill="none"/>
    <foreignObject x="150px" y="300px" width="200" height="150">
        <xhtml:body margin="0px" padding="0px" width="200px" height="150px" border="1px solid black">
            <canvas width="200" height="150" id="cnv"/>
        </xhtml:body>
    </foreignObject>
</g>
</svg>
<script type="text/javascript">
var canvas = document.getElementById('cnv');

canvas.width = 595;
canvas.height = 842;

var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';
ctx.strokeRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
0reactions
timvandermeijcommented, May 16, 2019

Thank you. I would suggest to report this upstream in the Chrome bug tracker then.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SVG to PDF rendering goes wrong - are there errors in my ...
I did this, because the symbol can be rotated by the user and the rotation is done from symbol point of view; any...
Read more >
HTML5 Canvas Tutorial for beginners - w3resource
Officially a canvas is "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on ...
Read more >
How to change the size of an embedded google doc in canvas
This quick video will show you an easy way to embed a PDF or any document in ... of the new canvas-based Google...
Read more >
yFiles for HTML - Changelog - yWorks
Version 2.5 introduced a new listener that was not properly removed, ... since no global yfiles object is created any more by this...
Read more >
Tutorial HTML5 - Google Sites
Chrome Frame currently does not require admin rights to be installed, ... The ability to inline SVG without the use of an object...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Webpack should handle loading worker instead of setting workerSrc

Next page

Jpx infinite loop for tiles with 0 Psot