Post
Ask Question

Drag an Image on Canvas Using HTML5

Introduction

 
In this article, we will learn how to drag an image in a canvas. Canvas is one of the important tags used to display images or text in an HTML5 application. We know that HTML5 is an advanced version of HTML used to develop multimedia and animated applications. This article is intended to help with the use of HTML5 tools to drag an image in canvas applications. We developed this application with some help from JavaScript; JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to create an application that drags an image in an HTML 5 canvas and JavaScript tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Canvas.aspx".
new.gif
 
application.gif
 
Step 2: Add an 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 "Image.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 drag on the canvas.
  • Right-click on the Solution Explorer.
  • Add-> Add New Folder.
  • Set the name of the folder as "image". 
folder.gif
 
image foledr.gif
 
images.gif
 
Step 4: In this section, we create a variable that is used to set a canvas id and color, height, width of a rectangle.
 
Code
  1. var Rxt = document.getElementById('Con1').getContext('2d');  
  2.           Rxt.fillStyle = 'green';  
  3.           Rxt.fillRect(0, 0, 2000, 2000);  
  4.           Rxt.rotate(.2); 
Step 5: In this section we create a variable named "Img" that is used to provide an image path and set a drag image of a size.
 
Code
  1. var Img = document.createElement('img');  
  2.         Img.src = 'image/cd3310.gif';  
  3.         Img.onload = function () { Rxt.drawImage(Img, 50, 0, 200, 200); }  
  4.         var down = false;  
  5.         Rxt.canvas.addEventListener('mousedown', function () { down = true; }, false);  
  6.         Rxt.canvas.addEventListener('mouseup', function () { down = false; }, false);  
  7.         Rxt.canvas.addEventListener('mousemove', function (event) {  
  8.         if (down)  
  9.            {  
  10.                 Rxt.translate(0, -50);  
  11.                 Rxt.drawImage(Img, event.clientX - this.offsetLeft,  
  12.                 event.clientY - this.offsetTop, 100, 100);  
  13.                 Rxt.translate(0, 50);  
  14.          } 
Step 6: In this section, we will write the complete code of a drag image on canvas application.
 
Code
  1. <html>  
  2.  <head>  
  3.  <title>Tom application</title>  
  4.  </head>  
  5.  <body alink="#ff99cc">  
  6.  <h1>  
  7.   Tom developed a drag image on canvas</h1>  
  8.   <canvas id="Con1" width="500" height="500"></canvas>  
  9.    <script type="text/javascript">  
  10.     var Rxt = document.getElementById('Con1').getContext('2d');  
  11.     Rxt.fillStyle = 'green';  
  12.     Rxt.fillRect(0, 0, 2000, 2000);  
  13.     Rxt.rotate(.2);  
  14.     var Img = document.createElement('img');  
  15.     Img.src = 'image/cd3310.gif';  
  16.     Img.onload = function () { Rxt.drawImage(Img, 50, 0, 200, 200); }  
  17.     var down = false;  
  18.     Rxt.canvas.addEventListener('mousedown', function () { down = true; }, false);  
  19.     Rxt.canvas.addEventListener('mouseup', function () { down = false; }, false);  
  20.     Rxt.canvas.addEventListener('mousemove', function (event) {  
  21.     if (down)  
  22.       {  
  23.          Rxt.translate(0, -50);  
  24.          Rxt.drawImage(Img, event.clientX - this.offsetLeft,  
  25.          event.clientY - this.offsetTop, 100, 100);  
  26.          Rxt.translate(0, 50);  
  27.            }  
  28.         }, false);  
  29.     </script>  
  30. </body>  
  31. </html> 
Step 7: Press "Ctrl + F5" to run an application in a browser.
 
Output
 
This is an original image.
 
out111.gif
 
This is a drag image.
 
out444.gif
 
out333.gif
 
out222.gif
 
Resources
 
Here are some useful resources:


Similar Articles