Edit and Render HTML5 Canvas in Java

Aspose.HTML for Java supports two Canvas workflows. You can load HTML that draws on a <canvas> element with JavaScript and convert the document, or create a canvas and draw on it directly through the Java Canvas 2D API.

To render HTML5 Canvas in Java, create or load an HTMLDocument that contains a <canvas> element and its drawing commands, then convert the document to PDF. To draw without JavaScript, obtain an ICanvasRenderingContext2D from the canvas and call its drawing methods before rendering the document.

What Is HTML Canvas?

The HTML <canvas> element provides a drawing surface for scriptable bitmap graphics. Drawing commands can create lines, shapes, images, gradients, and text. Aspose.HTML for Java can process Canvas content inside an HTML document and also exposes a Java interface for drawing directly on a canvas element.

HTML Canvas Key Features

Canvas size – the width and height attributes define the dimensions of the drawing surface. If they are omitted, HTML uses default dimensions, but explicit values make the output predictable.
Element identification – an id is not required by the <canvas> element. Add one when JavaScript or other code needs to locate that canvas, as in the first example.
Drawing context – call getContext("2d") to obtain the 2D context used for drawing text, shapes, gradients, and images.
HTML attributes and CSS – Canvas supports global HTML attributes. CSS can control its displayed appearance, such as adding a border, but CSS dimensions do not replace the drawing-surface dimensions defined by width and height.

Render JavaScript Canvas to PDF in Java

Canvas content embedded in HTML can be converted as part of the complete document. The following example creates an HTML file containing a 200 × 100 pixel canvas. Its inline JavaScript obtains the 2D context and draws the red text Hello World.

Prepare HTML markup containing a <canvas> element and JavaScript drawing commands.
Write the markup to an HTML file.
Load the file with HTMLDocument.
Create PdfSaveOptions with the default conversion settings.
Call Converter.convertHTML(document, options, outputPath) to convert the Canvas-based HTML to PDF.

 1// Convert HTML5 Canvas with JavaScript text to PDF using Aspose.HTML for Java
 2
 3// Prepare a document with HTML5 Canvas inside and save it to the file "document.html"
 4String code = "<canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>" +
 5        "<script>" +
 6        "var c = document.getElementById('myCanvas');" +
 7        "var context = c.getContext('2d');" +
 8        "context.font = '20px Arial';" +
 9        "context.fillStyle = 'red';" +
10        "context.fillText('Hello World', 40, 50);" +
11        "</script>";
12try (java.io.FileWriter fileWriter = new java.io.FileWriter("document.html")) {
13    fileWriter.write(code);
14}
15
16// Initialize an HTML document from the HTML file
17try (HTMLDocument document = new HTMLDocument("document.html")) {
18
19    // Convert HTML to PDF
20    Converter.convertHTML(document, new PdfSaveOptions(), "output.pdf");
21}

Example_ConvertHtml5CanvasWithJavaScriptTextToPdf.java hosted with ❤ by GitHub

The generated output.pdf contains the canvas border and the red text drawn by the embedded JavaScript.

Draw on Canvas with the Java 2D Context

Besides processing JavaScript inside an HTML document, you can work with Canvas directly from Java. Aspose.HTML provides the ICanvasRenderingContext2D interface for drawing rectangles, text, images, and other objects on the canvas surface. Its drawing model follows the HTML Canvas 2D context.

The following example creates a canvas, defines a horizontal linear gradient with magenta, blue, and red color stops, and assigns the gradient as the fill style. It then draws Hello, World! and a filled rectangle before rendering the document to PDF.

Create an empty HTMLDocument and add an HTMLCanvasElement to its body.
Set the canvas drawing-surface width and height.
Obtain the 2D context as ICanvasRenderingContext2D.
Create a linear gradient and add its color stops.
Set the gradient as the fill style.
Draw gradient-filled text with fillText() and a rectangle with fillRect().
Create a PdfDevice for the output file.
Call document.renderTo(device) to render the Canvas content to PDF.

 1// Create HTML5 canvas with gradient text and rectangle, convert to PDF with Java
 2
 3// Create an empty HTML document
 4try (HTMLDocument document = new HTMLDocument()) {
 5
 6    // Create a canvas element
 7    HTMLCanvasElement canvas = (HTMLCanvasElement) document.createElement("canvas");
 8
 9    // with a specified size
10    canvas.setWidth(300);
11    canvas.setHeight(150);
12
13    // Append the canvas element to the document body
14    document.getBody().appendChild(canvas);
15
16    // Get the canvas rendering context to draw
17    ICanvasRenderingContext2D context = (ICanvasRenderingContext2D) canvas.getContext("2d");
18
19    // Prepare a gradient brush
20    ICanvasGradient gradient = context.createLinearGradient(0, 0, canvas.getWidth(), 0);
21    gradient.addColorStop(0, "magenta");
22    gradient.addColorStop(0.5, "blue");
23    gradient.addColorStop(1.0, "red");
24
25    // Assign the brush to the content
26    context.setFillStyle(gradient);
27    context.setStrokeStyle(gradient);
28
29    // Write the text
30    context.fillText("Hello, World!", 10, 90, 500);
31
32    // Fill the rectangle
33    context.fillRect(0, 95, 300, 20);
34
35    // Create a PDF output device
36    try (PdfDevice device = new PdfDevice("canvas.output.pdf")) {
37
38        // Render HTML5 Canvas to PDF
39        document.renderTo(device);
40    }
41}

Example_CreateHtmlCanvasWithGradientAndConvertToPdf.java hosted with ❤ by GitHub

The generated canvas.output.pdf contains the gradient-filled text and rectangle drawn through the Java Canvas 2D context. The second example does not use JavaScript.

Common HTML5 Canvas Issues

Issue	Cause	Fix
Canvas content is missing	The document contains a canvas element but no drawing commands have populated its bitmap.	Include JavaScript drawing code or draw through `ICanvasRenderingContext2D` before conversion or rendering.
The output has an unexpected size	CSS dimensions and the canvas drawing-surface dimensions differ.	Set the canvas `width` and `height` properties or attributes explicitly.
Text or shapes are clipped	The drawing coordinates extend beyond the canvas surface.	Increase the canvas dimensions or adjust the coordinates and object sizes.
JavaScript cannot find the canvas	The selector in the script does not match the element.	When using `getElementById()`, assign the corresponding `id` to the canvas.

FAQ

Is Aspose.HTML for Java an interactive Canvas editor?

No. It provides programmatic APIs for loading, drawing, and rendering Canvas content in Java applications. It does not provide an interactive browser-based drawing interface.

Do I need JavaScript to draw on HTML5 Canvas?

No. Aspose.HTML for Java can process JavaScript drawing code embedded in HTML, but Java applications can also draw directly through ICanvasRenderingContext2D, as shown in the second example.

Recommendations

Set explicit canvas dimensions when output size matters.
Use an id only when a script or DOM lookup needs to identify the canvas.
Keep embedded JavaScript drawing code self-contained so it runs before conversion.
Use ICanvasRenderingContext2D when drawing should be controlled directly from Java.

You can download the complete examples and data files from GitHub.

Convert HTML to PDF in Java – convert HTML documents, including Canvas content, to PDF.
Fine-Tuning Converters in Java – control rendering devices, page setup, and PDF output settings.
Edit an HTML Document in Java – create and modify HTML elements and document content.
Advanced HTML Programming in Java – return to the advanced programming section.

Advanced Programming HTML Output Streams