Use CanvasRenderingContext2D in C#

Draw on HTML Canvas with a .NET API

Aspose.HTML for .NET exposes the HTML Canvas 2D context through the ICanvasRenderingContext2D interface. Create an HTMLCanvasElement, request its "2d" context, issue drawing commands in C#, and render the containing HTMLDocument to PDF or another supported output format.

Draw HTML Canvas and Render It to PDF

This example creates a 500 × 180 pixel canvas, draws gradient text and a rectangle within its bounds, and renders the completed HTML document to canvas.pdf.

using Aspose.Html;
using Aspose.Html.Dom.Canvas;
using Aspose.Html.Rendering.Pdf;

using HTMLDocument document = new HTMLDocument();

// Create and configure the canvas
HTMLCanvasElement canvas =
    (HTMLCanvasElement)document.CreateElement("canvas");
canvas.Width = 500;
canvas.Height = 180;
canvas.SetAttribute("style", "border: 1px solid #d3d3d3;");
document.Body.AppendChild(canvas);

// Get the 2D drawing context
ICanvasRenderingContext2D context =
    (ICanvasRenderingContext2D)canvas.GetContext("2d");

// Create a horizontal gradient
ICanvasGradient gradient =
    context.CreateLinearGradient(0, 0, canvas.Width, 0);
gradient.AddColorStop(0, "magenta");
gradient.AddColorStop(0.5, "blue");
gradient.AddColorStop(1, "red");

// Draw gradient text and a rectangle
context.FillStyle = gradient;
context.Font = "bold 32px sans-serif";
context.FillText("HTML Canvas 2D", 20, 70);
context.FillRect(20, 110, 460, 30);

// Render the HTML document to PDF
using PdfDevice device = new PdfDevice("canvas.pdf");
document.RenderTo(device);

Steps to Draw and Render HTML Canvas

1. Create an HTMLDocument and add an HTMLCanvasElement to its body.
2. Set the canvas Width and Height properties to define its bitmap dimensions and coordinate space.
3. Call GetContext("2d") and cast the result to ICanvasRenderingContext2D.
4. Configure drawing styles and call methods such as FillText() and FillRect() .
5. Create a PdfDevice and pass it to RenderTo() to write the document to PDF.

HTML Canvas 2D Capabilities and Rendering Notes

• Shapes and paths. Draw filled or stroked rectangles, lines, curves, arcs, and custom paths with the Canvas 2D methods.
• Text and images. Set fonts and drawing styles, render text, and place supported image sources on the canvas.
• Colors, gradients, and patterns. Assign solid colors, ICanvasGradient objects, or patterns to FillStyle and StrokeStyle.
• Transforms and composition. Translate, rotate, scale, clip, control opacity, and select how new drawing operations combine with existing pixels.
• Bitmap dimensions matter. The Width and Height properties define the canvas backing bitmap. Scaling only its CSS size can stretch the bitmap and reduce visual sharpness.
• Rendering captures the current canvas. Complete the drawing commands before calling RenderTo(). Use PdfDevice, XpsDevice, DocDevice, or ImageDevice when another supported output is required.

Canvas 2D and Rendering Documentation

Read Edit HTML5 Canvas for both supported workflows: loading HTML that draws through JavaScript and drawing directly through the C# Canvas 2D API. The ICanvasRenderingContext2D API Reference lists the available properties and drawing methods. See Rendering Devices when the application needs PDF, XPS, DOCX, or image output and device-specific options.

Get Started with Aspose.HTML for .NET API

Install Aspose.HTML for .NET from NuGet with the .NET CLI:

dotnet add package Aspose.HTML

You can also use the NuGet Package Manager UI or run Install-Package Aspose.HTML in the Package Manager Console. See the installation guide for setup details, or request a temporary license to evaluate the API without evaluation limitations.

HTML Canvas 2D FAQ

1. What is the difference between HTMLCanvasElement and ICanvasRenderingContext2D?

The HTMLCanvasElement represents the <canvas> node and defines its bitmap dimensions. ICanvasRenderingContext2D is the drawing interface returned by GetContext("2d"); it provides the styles, paths, text, image, transform, and pixel operations applied to that canvas.

2. Why can HTML Canvas output look blurred or stretched?

The canvas Width and Height properties define the backing bitmap. If CSS displays that bitmap at substantially different dimensions, the browser or renderer scales the pixels. Set the bitmap dimensions for the intended output size instead of relying only on CSS scaling.

3. Can Aspose.HTML render a canvas that is drawn by JavaScript?

Yes. Load an HTML document containing the <canvas> element and its script, allow the document to complete script execution, and then convert or render the document. Direct C# drawing with ICanvasRenderingContext2D is available when JavaScript is unnecessary.

4. Does rendering HTML Canvas to PDF convert the drawing into editable HTML or SVG vectors?

No. Canvas is a bitmap drawing surface. Rendering preserves its visible state in the output document, but it does not reconstruct the drawing as editable HTML elements or SVG paths.

5. Can I save HTML Canvas as an image instead of PDF?

Yes. Render the containing HTMLDocument through an ImageDevice configured for the required raster output. The canvas remains part of the page layout, so page size, margins, and surrounding HTML can affect the resulting image.