3 ms·
I don't really understand this paragraph. I just created test.html: <!DOCTYPE html> <canvas id="tutorial" width="150" height="150"></canvas> <scr
by vbezhenar 4y ago
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.
- lifthrasiir 4y agoThat'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/Canvas_API/Tutorial/Drawing_shapes/_sample_.making_combinations.html https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/C...
- vbezhenar 4y agoThanks 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.
- lifthrasiir 4y agoOh, I had a trouble in spelling "print" vs. "paint" ;-) (Fixed.) I now wonder why Blink specifically supports this, presumably to support some weird websites?
- afiori 4y agoI read it as "convert to SVG" rather than "reconstruct vector data"