In the first part of this article, we will take a practical look at the HTML5
Canvas tag and create a sample application to generate an image with selections
specified by the user.
The canvas tag in HTML5 provides a canvas which is similar to a blank canvas in
What can it do?
The canvas offers you a broad set of features - you can literally compare it's
features to a full fledged drawing application.
Following is a list of the various things you can do :
In this application we will consider a sport league website which offers a
feature to design your team logo. To scope the article sample, we allow the user
to enter their team name, select a forecolor and a back-color.
logo image, using the text and colors specified by the user.
For the sake of the demonstration, we draw a rectangular linear gradient,
combining the font color and the back color, render the background color
specified by the user, and finally the logo text using the color and text
specified by the user. Sample in Action
Image: Various logos generated by the application
Source Code (save as canvaslogo.htm
Dipal Choksi has over 10 years of industry experience in team-effort projects and also as an individual contributor. She has been working on the .Net platform since the beta releases of .Net 1.0.
C# Corner. All contents are copyright of their authors.