In this article, I will show you how to generate the HTML5 Canvas element with graphics using C#. You can embed this feature within your .NET web applications for the dynamic generation and integration of HTML5 Canvas on web pages.
HTML5 Canvas element is used to draw graphics on the fly within the web pages. It provides you with an area that acts as a container of graphics or drawing objects. You can draw paths, boxes, texts, images, and other objects and then render them into image formats. Aspose.Imaging for .NET allows you to generate an HTML5 Canvas element using C# or VB.NET. This feature lets you create the HTML5 Canvas dynamically and set its source graphics file within your web applications such as ASP.NET application. So let’s proceed further to check how to create the HTML5 Canvas element using C# with Aspose.Imaging for .NET API.
- C# API to Generate HTML5 Canvas - Installation
- Create a Web Page with HTML5 Canvas using C#
- Generate HTML5 Canvas Element Only using C#
C# API to Generate HTML5 Canvas - Installation
First of all, let’s have a look at how to install Aspose.Imaging for .NET within your .NET application. It’s as simple as pie. You may either add a reference to API’s DLL or install it using NuGet Package Manager.
PM> Install-Package Aspose.Imaging
Create a Web Page with HTML5 Canvas using C#
HTML5 Canvas allows you to set a source image that would appear within the canvas area. Using Aspose.Imaging for .NET, you can export CDR, CMX, EMF, WMF, and SVG graphics to an HTML5 Canvas without worrying about the HTML, JavaScript, and CSS code. The following are the steps to create an HTML page having an HTML5 Canvas element on it.
- Load a graphics file that you want to set as a source of the canvas using Image.Load() method.
- Create HTML5 Canvas by exporting the image using Image.Save() method.
The following code sample shows how to create HTML5 Canvas with graphics using C#.
Generate HTML5 Canvas Element Only using C#
In the previous example, we have generated a complete HTML page that contains the HTML5 Canvas element. However, in certain cases, you may need to generate the canvas element only to embed it within your web page. For such cases, you can configure Aspose.Imaging API to avoid generating the complete HTML page. The following are the steps to generate the HTML5 Canvas element.
- Load a graphics file to set as a source of the canvas using Image.Load() method.
- Set Html5CanvasOptions.FullHtmlPage proptery to false.
- Export the image to HTML using Image.Save() method.
The following code sample shows how to create the HTML5 Canvas element only using C#.
Conclusion
This article covered how to generate HTML5 Canvas dynamically using C# within .NET applications. We have seen how to create the complete HTML page containing an HTML5 Canvas or HTML5 Canvas only using Aspose.Imaging for .NET. You can explore more about the API using the documentation.