Rotate an ASP.NET Image Control using HTML 5 Canvas
Posted by: Suprotim Agarwal ,
on 12/16/2011,
in
Category ASP.NET
Abstract: The Canvas element is an HTML tag that you can embed inside an HTML document, for the purpose of drawing graphics, via a JavaScript API. In this article, we will see how to use the HTML 5 canvas element to rotate an Image served by the ASP.NET Image Control.
The HTML5 canvas is one of the oldest HTML 5 elements. Introduced by Apple Inc. initially in 2004, the Canvas element made its way into the first HTML 5 draft specification. The Canvas element is an HTML tag that you can embed inside an HTML document, for the purpose of drawing graphics, via a JavaScript API.
In this article, we will see how to use the HTML 5 canvas element to rotate an Image served by the ASP.NET Image Control.
Step 1: Open VS 2010 and create an ASP.NET Website. Set it’s target schema for validation as HTML 5 by going to Tools > Options > Text Editor > HTML > Validation
Step 2: Declare the following markup
As you can see, we have declared an HTML 5 canvas element of dimensions 400x400 and an ASP.NET Image control with display set to none. I will explain shortly, why the display is set to none.
Step 3: Now declare the following JavaScript code inside the <head> element
Let us understand this code line by line
The window.onload is to wait for the page to load before trying to access the canvas tag by its ID. To draw on the canvas, we need a reference to it. We have used getElementById to get this reference from the DOM. We then set a variable context to reference the 2D context of the canvas, which is used for all drawing purposes. In other words, we are asking the Canvas to give us a context to draw on.
Note: If you are wondering if there is 3D context too, then the answer is not yet! Take a look at WebGL and SceneJS.
The next line of code, references the asp.net image control in JavaScript using ClientID. We have also declared the width and height variables for the image. Do not set the image width and height in the mark up, since you have set the display property to none.
The final step is to rotate the image
We are using a translate transform to move the center point of the coordinate system, which is in the top-left corner of the canvas (0,0). We have to move the center position because we have to rotate the canvas context by 45 degrees, around this current position. After moving the center point, it is now (200,200).
Note: the canvas.width and height is 400 and 400/2 = 200.
After moving your reference point to (200,200), we are now centering our image over that point, by calling the drawImage() method. We are drawing the image from above and to the left, of your current reference point.
context.drawImage(img, x, y, width, height)
This function makes a 200 × 200 pixel box for the image, with the top-left corner at point (-100,-100).
The last step is to set the image source to the desired image. The reason we set the display property of the ASP.NET image control to none is to avoid displaying the image twice; once where the image control is declared outside the canvas and second, where we are drawing the image inside the canvas.
Detecting Browser Support and Graceful Degradation
The latest versions of IE (9 onwards), Firefox, Safari, Chrome and Opera all provide reasonably good support for the Canvas element. However for users who are using older browser versions, we can easily detect browser support or gracefully display a message, if the user’s browser does not support Canvas. For eg: to check if your browser supports canvas and the getContext method exists, change the line of code to:
Wrap the above code in a try-catch block for handling exceptions. HTML 5 provides a nice way to handle browsers that do not support HTML 5. This is done by adding a piece of text inside the Canvas element saying that the users browser does not support this feature. Every time the browser sees an element it doesn’t recognize, it displays any text contained within it as a default behavior. That’s graceful! Use this for displaying simple messages. If you want to perform a more advanced action, such as redirecting the user, use JavaScript.
There’s yet another approach to detect HTML 5 feature support on browsers, which I use often in my HTML 5 apps. Modernizr is a JavaScript library that detects the availability of HTML5 (and CSS3) features.
The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn