Rendering HTML5 Canvas to PDF documents using Aspose.HTML
Tags: csharp, pdf
Published: 2018-06-04 20:52:12

---
title: Rendering HTML5 Canvas to PDF documents using Aspose.HTML
published: true
description: The Canvas API is a powerful tool for creating images and it can also be used to place graphics in PDF documents.
tags: csharp, pdf
---

In many cases, HTML documents are used to create templates for various reports with subsequent conversion into PDF docs. The Canvas API is a powerful tool for creating images and it can also be used to place graphics in PDF documents. This API is used by writing JS-scripts that can access the canvas area through a full set of drawing functions, thus allowing for dynamically generated graphics.

Aspose.HTML supports two methods of accessing to canvas elements:

* via JavaScript code - this is a traditional method and it is preferable when we use standard HTML docs;
* via Aspose.HTML API - this method is more convenient for creating in-memory HTML docs;

Since the first method is very popular, we will consider only a small example of its usage.

{% gist https://gist.github.com/andruhovski/8f34ab059de729cdae1942ffaf83e9a5 %}

As has been said before, we will use the Aspose.HTML API in the second method. This method has some differences from the previous, mainly because of the features of the .NET platform, but the main concept is the same. 
As an example, consider the following problem: suppose that we need to generate a report for one (or several) images on which we need to mark certain regions (faces, animals, etc) and add it with text. Thus, our solution will consist of the following steps:

* Generate a template;
* Get details about the image (from external service);
* Generate report as HTML document;
* Convert HTML document to PDF one.

{% gist https://gist.github.com/andruhovski/c30a1057d5ff3ade4802ab131aa3964d %}

Step 1 is pretty straightforward:
{% gist https://gist.github.com/andruhovski/34b25c0a3b5af582e182ca74d804a2d1 %}

In step 2, we will use Microsoft Cognitive Services (Face API). You may learn more about this service on [Microsoft Docs](https://docs.microsoft.com/en-us/azure/cognitive-services/face/overview). In short, we call the REST API and get the result with a set of detected faces with additional info.

{% gist https://gist.github.com/andruhovski/4834f04140065bdd27e2c5034856eb30 %}

Now we can add the data to report: modify `canvas` and add `p` element after the `canvas`. In order to modify `canvas`, we need to get the `context` of this element and make the drawing.

{% gist https://gist.github.com/andruhovski/2741ccce32dbaff7ac7a1888fbb86208 %}

The resulting object from the previous step is an array, which contains rectangles, that describes face locations on the image. So, we run the loop and draw the rectangles in the manner as in JavaScript code. At the last, we add details as `p` elements below `canvas`.

{% gist https://gist.github.com/andruhovski/ab775a61ffc4261880f787abc7925db2 %}


Оbtained HTML document we can easily convert to PDF.

{% gist https://gist.github.com/andruhovski/16ab420cdc0742453f399e75e72f0681 %}

You can see full example here:

{% gist https://gist.github.com/andruhovski/d426b045527d60d9e1b0ca93e29695b6 %}