Hi there👋

Welcome to my blog 🥺. I write about front end and other tech stuffs here.

A quick way to layout & render HTML rich text to canvas

As we know, the canvas fillText API can only draw a single line of text. If we want to draw multiple lines of text, or we want to draw a line of text with different kinds of styles and font sizes, we’ll need to find a way to layout all the text blocks. That is, try to figure out where to put the text and get the x and y parameters for the fillText API....

Exporting HTML canvas to PDF & PNG using JS

When exporting the content of a whiteboard web app, we are exporting the content of an HTML canvas element to PDF format(Vector Image) or PNG(Raster Image). This post will introduce the basic method for exporting the content of HTML canvas and also some issues we encountered when working on this feature. Export to PDF Export method We’ll use PDFKit to generate the PDF file. We have the SVG string as the source for the vector format of the content we draw on the HTML canvas element....