Create effects for web graphics with HTML5 canvas

HTML5 Canvas will use pixels to draw a graphic image on the screen. This section demonstrates five Canvas techniques for manipulating pixels to create photographic effects. You can use these techniques to generate unique images that provide information or artistic interest in your site, blog, video game screen, ads, and illustrations.
This tutorial contains five separate annotated code examples that show you how these techniques can improve a photographic image of the eagle. These examples explain how to do the following: Place a photo of the eagle in a circle, add a snow-white texture to the background, change the color composition significantly, make the image transparent, and change the entire picture from color to black and white.
This topic describes how to use HTML5 Canvas to put photos into different shapes and create visual effects for your Web design.
This topic contains a separate annotated code example that shows how to put a picture of a hawk in a circular shape. This code example demonstrates how to use Canvas to load an eagle photo and display it on the screen. It then demonstrates how to use the Canvas arc method to create a circle and add a white round box around the eagle. The discussion material at the end of this sample will explain more about how the code works to develop this technology.
The Canvas code sample discusses:
This discussion explains the design and structure of this Canvas sample and how all the parts work together. This example uses the standard HTML5 header so that the browser can differentiate it as part of the HTML5 specification. The code is divided into two main sections:
1. Main code
2. Script code
Body Code
When the page is loaded, the body tag uses the OnLoad function to invoke the DisplayImage function. Loads the native image of the eagle into the body so that you can compare it to the image to be modified by the Canvas. The canvas tag is part of the body. Specifies the initial width and height of the Canvas, and also specifies the id attribute. You must use an ID to add a Canvas element to the object model of the page.
Script code
The script code consists of two functions: DisplayImage and Getcolordata. The DisplayImage function is called when the page is loaded. The Getcolordata function is called from DisplayImage. Create a global variable at the beginning of the script section to create a blank image file that will be used later.
displayimage function
This function is called when the page is loaded. It gets the canvas by using the ID of the canvas element in the body code. It then gets the CANVASRENDERINGCONTEXT2D object of the canvas, prepares it to accept the drawing, and loads the image into context using DrawImage. After the context is initialized to a two-dimensional canvas, you can start drawing on the canvas.
The last work of the function is to specify the source of the image by providing a path. Because the image may not load immediately, an event is set up to invoke a function after the image is actually loaded. After the image is loaded, the image is displayed and the Changeimage function that is used to complete the drawing work is called.
changeimage function
Modify the image by drawing a circle around the center of the image using the Arc method. The image is a total of 200 pixels and the radius of the circle will be 150 pixels. Because the center of the Circle is the center of the image, and the rounded border is 100 pixels thick, the pixels on the outer edge are replaced with white pixels. The Strokestyle attribute, linewidth attribute, Beginpath method, Arc method, Closepath method, and stroke method define the circle.
Code Requirements
This code runs in Windows Internet Explorer 9. It does not work correctly in earlier versions of Windows Internet Explorer, but may be able to run in other browsers that support HTML5 Canvas.
? 1. Code [HTML] Code
<! DOCTYPE html>
<script type= "Text/javascript" >
Global variables
var myimage =
New Image (); Create a new blank image.

Load the image and display it.
function DisplayImage () {

//
Get the canvas element.
Canvas = document.getElementById ("MyCanvas");

Make sure got it.
if (Canvas.getcontext) {

Specify 2d canvas type.
CTX = Canvas.getcontext ("2d");

When the image is loaded, draw it.
Myimage.onload =
function () {

Load the image into the context.
Ctx.drawimage (myimage, 0, 0);

//
Get
and modify the image data.
Changeimage ();
}

Define the source of the image.
MYIMAGE.SRC =
"Http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png";
}http://www.enterdesk.com/special/sexygirl/?
} Beautiful Pictures

function Changeimage () {

Ctx.strokestyle =
"White";
Ctx.linewidth =
"100";
Ctx.beginpath ();
Ctx.arc (0, Math.PI *
2, true);
Ctx.closepath ();
Ctx.stroke ();
}
</script>
<body onload= "displayimage ()" >
American Kestral
<p>
The original image is
On the left
And the modified image is
On the right.
</p>

<canvas id= "MyCanvas" width= "height=" >
</canvas>
<p>
Public domain image courtesy of U.S. Fish and wildlife Service.
</p>
</body>
?

Create effects for web graphics with HTML5 canvas