Drag an Image on Canvas Using HTML5


Introduction

In this article we will be learn how to drag an image in a canvas. Canvas is one of the important tags used to display image or text in a 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 of JavaScript; JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. I hope this article helps to a create an application that drags an image in a HTML 5 canvas and JavaScript tools.

Step 1: Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Canvas.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 "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 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

var Rxt = document.getElementById('Con1').getContext('2d');

          Rxt.fillStyle = 'green';

          Rxt.fillRect(0, 0, 2000, 2000);

          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

var Img = document.createElement('img');

        Img.src = 'image/cd3310.gif';

        Img.onload = function () { Rxt.drawImage(Img, 50, 0, 200, 200); }

        var down = false;

        Rxt.canvas.addEventListener('mousedown', function () { down = true; }, false);

        Rxt.canvas.addEventListener('mouseup', function () { down = false; }, false);

        Rxt.canvas.addEventListener('mousemove', function (event) {

        if (down)
           {

                Rxt.translate(0, -50);

                Rxt.drawImage(Img, event.clientX - this.offsetLeft,

                event.clientY - this.offsetTop, 100, 100);

                Rxt.translate(0, 50);

         }

Step 6: In this section we will write complete code of a drag image on canvas application.

Code

<html>

 <head>

 <title>Tom application</title>

 </head>

 <body alink="#ff99cc">

 <h1>

  Tom developed a drag image on canvas</h1>

  <canvas id="Con1" width="500" height="500"></canvas>

   <script type="text/javascript">

    var Rxt = document.getElementById('Con1').getContext('2d');

    Rxt.fillStyle = 'green';

    Rxt.fillRect(0, 0, 2000, 2000);

    Rxt.rotate(.2);

    var Img = document.createElement('img');

    Img.src = 'image/cd3310.gif';

    Img.onload = function () { Rxt.drawImage(Img, 50, 0, 200, 200); }

    var down = false;

    Rxt.canvas.addEventListener('mousedown', function () { down = true; }, false);

    Rxt.canvas.addEventListener('mouseup', function () { down = false; }, false);

    Rxt.canvas.addEventListener('mousemove', function (event) {

    if (down)
      {

         Rxt.translate(0, -50);

         Rxt.drawImage(Img, event.clientX - this.offsetLeft,

         event.clientY - this.offsetTop, 100, 100);

         Rxt.translate(0, 50);

           }

        }, false);

    </script>

</body>

</html>

Step 7: Press "Ctrl + F5" to run an application in a browser.

 

Output

 

This is a original image.

 out111.gif


This is a drag images.

out444.gif

out333.gif

out222.gif

Resources

Here is some useful resources:

Up Next
    Ebook Download
    View all
    Learn
    View all