Edit HTML5 Canvas in Java

What is HTML Canvas?

The HTML Canvas element is an HTML5 element in an HTML document that is added using the <canvas> tag. This element is part of HTML5 and provides scriptable dynamic rendering of 2D shapes and bitmaps. This is a low-level procedural model that updates a bitmap. HTML5 Canvas, which is used for rendering graphs, game graphics, art, or other visual images on the fly, is in the list of built-in formats of the Aspose.HTML class library.

The <canvas> element must have:

• id attribute so it can be referred to by JavaScript.
• width and height attributes to define the size of the canvas.

The HTML Canvas element also has other attributes that you can set to configure its behavior and appearance. For example, if you want to to add a border, use a style attribute. The <canvas> element also supports the Global Attributes and in HTML.

HTML5 Canvas – How to Edit in Java

To render canvas as a part of an HTML document, you do not need any particular manipulation. Just render the document as you usually do. The following code snippet demonstrates how to work with a document that contains an HTML5 Canvas element: the HTML <canvas> element has an id, width, height, and style attributes; inside the <canvas> element, there is a script block that contains JavaScript code to draw “Hello World” on the canvas.

1. Prepare an HTML code with HTML5 Canvas inside and use the java.io.FileWriter class to write the HTML code to a file.
2. Initialize an HTML document from the file using the HTMLDocument class.
3. Call the convertHTML(document, options, outputPath) method to convert HTML to PDF with the default save options.

// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-Java
// Prepare a document with HTML5 Canvas inside and save it to the file 'document.html'
String code = "<canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>" +
                "<script>" +
                "var c = document.getElementById('myCanvas');" +
                "var context = c.getContext('2d');" +
                "context.font = '20px Arial';" +
                "context.fillStyle = 'red';" +
                "context.fillText('Hello World', 40, 50);" +
                "</script>";
java.io.FileWriter fileWriter = new java.io.FileWriter("document.html");
fileWriter.write(code);
fileWriter.close();

// Initialize an HTML document from the html file
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument("document.html");

// Convert HTML to PDF
com.aspose.html.converters.Converter.convertHTML(document, new com.aspose.html.saving.PdfSaveOptions(), "output.pdf");

Canvas Rendering Context 2D

Besides processing HTML5 Canvas as a part of an HTML document, you can work with canvas directly inside your Java code. Aspose.HTML provides ICanvasRenderingContext2D interface for these operations, which is fully based on the official standard. Following code snippet shows how to use the drawing feature of HTML5 Canvas to render a custom text filled in with the gradient brush.

// Create an empty HTML document
com.aspose.html.HTMLDocument document = new com.aspose.html.HTMLDocument();

// Create the Canvas element
com.aspose.html.HTMLCanvasElement canvas = (com.aspose.html.HTMLCanvasElement) document.createElement("canvas");

// with a specified size
canvas.setWidth(300);
canvas.setHeight(150);

// and append it to the document body
document.getBody().appendChild(canvas);

// Get the canvas rendering context to draw
com.aspose.html.dom.canvas.ICanvasRenderingContext2D context = (com.aspose.html.dom.canvas.ICanvasRenderingContext2D) canvas.getContext("2d");

// Prepare the gradient brush
com.aspose.html.dom.canvas.ICanvasGradient gradient = context.createLinearGradient(0, 0, canvas.getWidth(), 0);
gradient.addColorStop(0, "magenta");
gradient.addColorStop(0.5, "blue");
gradient.addColorStop(1.0, "red");

// Assign brush to the content
context.setFillStyle(gradient);
context.setStrokeStyle(gradient);

// Write the Text
context.fillText("Hello World!", 10, 90, 500);

// Fill the Rectangle
context.fillRect(0, 95, 300, 20);

// Create the PDF output device
com.aspose.html.rendering.pdf.PdfDevice device = new com.aspose.html.rendering.pdf.PdfDevice("canvas.pdf");

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

To learn more about how to use HTML5 Canvas, you can read the popular public HTML Canvas Tutorial.

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