CanvasRenderingContext2D – C#

What is CanvasRenderingContext2D?

The HTML <canvas> element is a bitmapped area in an HTML page. Aspose.HTML for .NET provides the ICanvasRenderingContext2D interface that is used for drawing rectangles, text, images, and other objects onto the HTML canvas. It provides the 2D rendering context for the drawing surface of a <canvas> element. With its help, you can draw shapes, lines, curves, boxes, text, and images, use colors, rotations, transformations, and other pixel manipulations.

First, make sure you have Aspose.HTML for .NET installed in your project. The installation process of this library is quite simple. Open the NuGet package manager, search for Aspose.HTML, and install. You may also use the following command from the Package Manager Console:

Install-Package Aspose.HTML

How to Render HTML Canvas in C#

The Aspose.Html.Dom.Canvas namespace provides a means for drawing graphics via the HTML <canvas> element and largely focuses on 2D graphics. The following C# code snippet shows how to use the drawing feature of HTML5 Canvas to render custom 2d graphics with text and a shape filled with the radial gradient:

using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Pdf;
using System.IO;
...

    // Create an HTML document
    using (var document = new HTMLDocument())
    {
        // Add a <canvas> element to the document
        var canvas = (HTMLCanvasElement)document.CreateElement("canvas");
        document.Body.AppendChild(canvas);

        // Set the width, height and style attributes of the canvas
        canvas.Width = 400;
        canvas.Height = 400;
        canvas.Style.Border = "1 solid #d3d3d3";
        
        // Get the rendering context of the canvas (2d context)
        var context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");

        // Create a radial gradient
        var gradient = context.CreateRadialGradient(200, 200, 40, 200, 200, 140);
        gradient.AddColorStop(0, "#c11700");
        gradient.AddColorStop(0.5, "orange");
        gradient.AddColorStop(1, "#5a2100");

        // Write the text
        context.Font = "bold 28px serif";
        context.FillText("Radial Gradient", 100, 40);

        // Fill the rectangle with the radial gradient
        context.FillStyle = gradient;
        context.FillRect(50, 50, 400, 400);

        // Prepare an output path
        string outputPath = Path.Combine(OutputDir, "canvas-radial.pdf");

        // Create the PDF output device
        using var device = new PdfDevice(outputPath);

        // Render HTML5 Canvas to PDF
        document.RenderTo(device);
    }

Step-by-Step Guide – CanvasRenderingContext2D

1. Use the HTMLDocument() constructor to initialize an HTML document. In the example, we create HTML from scratch, but you can also load the document from a file or URL.
2. Create a <canvas> element using the CreateElement() method, and append it to the body of the HTML document. Set the required attributes for the <canvas> element, for example, width, height, and style.
3. To use the 2d canvas context, you need to call the GetContext() method on the <canvas> element and use 2d as the argument.
4. The next step is the drawing on HTML canvas:
   • A radial gradient is created using the CreateRadialGradient() method, defining color stops at different positions to create a smooth transition of colors.
   • Text is written on the canvas using the FillText() method. Use the Font property of the 2D rendering context to set font settings for text rendering.
   • The canvas rectangle is filled with the previously created radial gradient using the FillRect() method.
5. Render HTML5 Canvas to PDF:
   • Use one of the PdfDevice() constructors to create an object of the PdfDevice class.
   • Call RenderTo(device) method. This method takes the object of the PdfDevice class as a parameter.

So, this C# code creates a PDF document with text and a radial gradient drawn on the canvas. The resulting PDF file is saved to the specified output path.

HTML Renderer

The Aspose.Html.Rendering namespace offers the HtmlRenderer class that is responsible for rendering HTML documents through the IDevice interface implementation. The rendering device encapsulates a 2D drawing surface. Currently, Aspose.HTML for .NET API provides the following implementations: PdfDevice, XpsDevice, DocDevice, and ImageDevice, which are used to generate PDF, XPS, DOCX, and Image file formats, respectively.

In the example we looked at above, an HTML document was rendered in PDF format. But you can choose a different rendering device and convert the document to another format that you need.

Aspose.HTML for .NET – Documentation

Aspose.HTML for .NET is an advanced HTML parsing library. One can create, edit, navigate through nodes, extract data, merge and convert HTML, XHTML, MD, EPUB, and MHTML files to PDF, DOCX, Images, and other popular formats. Moreover, it also handles CSS, HTML Canvas, SVG, XPath, and JavaScript out-of-the-box to extend manipulation tasks. For more details about C# library installation and system requirements, please refer to Aspose.HTML Documentation .

In the article Edit HTML5 Canvas – С# Examples , you will learn about HTML Canvas and how to work with a document that contains HTML5 <canvas> element using Aspose.HTML for .NET API.

In the Fine-Tuning Converters chapter, Aspose.HTML for .NET provides alternative ways to render HTML documents that can give you more control over the rendering process in your C# application. Our C# library implements a set of rendering devices – PdfDevice, XpsDevice, DocDevice, and ImageDevice. Each has its unique set of options implemented with classes PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions, and ImageRenderingOptions, respectively.