Introduction
This is a simple application for beginners that shows how to create a transparent photo using a HTML 5 canvas and JavaScript tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to create a transparent photo on canvas applications. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. Canvas is an important tag of a HTML 5 that is used to show images and text in HTML 5 applications. I hope this article helps to a create a transparent photo on canvas using HTML 5 and JavaScript tools.
Step 1: Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "Image.aspx".
![new.gif]()
![application.gif]()
Step 2: Add a HTML file to your web application.
- Right-click on the Solution Explorer.
- Add->add new item->HTML form.
- The Name of the HTML form is "Transparent.html".
![css.gif]()
![html.gif]()
Step 3: In this step we add a folder named "image" that is used to store all images. The images are used to display on the canvas.
- Right-click on the Solution Explorer.
- Add-> Add New Folder.
- Set the name of the folder as "image".
![folder.gif]()
![image.gif]()
![imageadd.gif]()
Step 4: In this section we create a function named "Disimg" that is used to set the height, width, length and also set a path of the image.
Code
function Disimg()
{
canvas = document.getElementById("myCanvas");
if (canvas.getContext)
{
Rxt = canvas.getContext("2d");
Img.onload = function ()
{
Rxt.drawImage(Img, 0, 0);
GetColor();
PutColor();
}
Img.src = "image/flower-18.jpg";
}
}
Step 5: In this section we create two functions named "Getcolor" and "Putcolor" used to set a visualization of a transparent color image.
Code
function GetColor()
{
Img = Rxt.getImageData(0, 0, 420, 335);
for (var i = 0; i < L * 4; i += 4)
{
Img.data[i + 3] = 50;
}
}
function PutColor()
{
Rxt.putImageData(Img, 0, 0);
}
function NoImage()
{
alert("Please put a .gif file in this folder and name it flower-18.jpg.");
}
Step 6: In this section we create a body part of a transparent color image application.
Code
<body onload="Disimg()" bgcolor="#ffcccc">
<h1>
Tom Developed a Transparent Image
</h1>
<img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">
<canvas id="myCanvas" width="420" height="335">
</canvas>
</body>
![body.gif]()
Step 7: In this section we write a complete demo code of a transparent color application.
Code
<html>
<head>
<title>Tom application</title>
<script type="text/javascript">
var W = 400;
var H = 400;
var L = W * H;
var Img = new Image();
function Disimg()
{
canvas = document.getElementById("myCanvas");
if (canvas.getContext)
{
Rxt = canvas.getContext("2d");
Img.onload = function ()
{
Rxt.drawImage(Img, 0, 0);
GetColor();
PutColor();
}
Img.src = "image/flower-18.jpg";
}
}
function GetColor()
{
Img = Rxt.getImageData(0, 0, 420, 335);
for (var i = 0; i < L * 4; i += 4)
{
Img.data[i + 3] = 50;
}
}
function PutColor()
{
Rxt.putImageData(Img, 0, 0);
}
function NoImage()
{
alert("Please put a .gif file in this folder and name it flower-18.jpg.");
}
</script>
<style type="text/css">
#myPhoto
{
width: 418px;
height: 324px;
}
</style>
</head>
<body onload="Disimg()" bgcolor="#ffcccc">
<h1>
Tom Developed a Transparent Image
</h1>
<img id="myPhoto" src="image/flower-18.jpg" onerror="NoImage()">
<canvas id="myCanvas" width="420" height="335">
</canvas>
</body>
</html>
Step 8: Press Ctrl + F5 run application on browser.
Output
Now this is a original image on canvas.
![out1.gif]()
Now this a transparent image on canvas.
![out3.gif]()
![out2.gif]()
Resources
Here is some useful resources: