Hacker News new | past | comments | ask | show | jobs | submit login

I don't really understand this paragraph. I just created test.html:

    <!DOCTYPE html>

    <canvas id="tutorial" width="150" height="150"></canvas>

    <script>
      var c = document.getElementById("tutorial");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(75, 50);
      ctx.lineTo(100, 75);
      ctx.lineTo(100, 25);
      ctx.fill();
    </script>
and used Chrome to pdf print it. Then I opened PDF in a Sumatra PDF Reader, zoomed in and it's obviously not vectorized.



That's a good point, and it took me a bit of trials to force Chrome to print canvas in vector. The article links to the MDN <canvas> demo [1], which doesn't print in vector if you try it. But you can run the following in the console and then try to print the same page, which will be vectorized:

    window.onbeforeprint = () => {
        window.canvas.width |= 0; // clear the canvas
        draw();
    };
So I guess, for now, this behavior only manifests when you use the beforeprint event.

[1] https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/C...


Thanks a lot! Just a little typo: it should be `onbeforeprint` I guess. I just checked and it works. That approach has a potential to solve important problem for me.


Oh, I had a trouble in spelling "print" vs. "paint" ;-) (Fixed.) I now wonder why Blink specifically supports this, presumably to support some weird websites?


I read it as "convert to SVG" rather than "reconstruct vector data"




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: