To change the position of the rectangle when i click on the button using html5 canvas

Question

I am using html5 canvas to create the image annotation to process the bank credit card form i need to change the position of the rectangle when i click the 1.name button the rectangle should be highlight to name column 2.city to highlight the city column 3.phone to highlight to phone column from the form please any body help me how to use the button click event in this following code.

html5

<div id="content"style="width:1200px; height:500px; overflow:scroll;">
    <canvas id="tool_sketch" width="1200" height="1500" style="background: url(https://www.google.co.in/search?q=credit+card+form&tbm=isch&source=iu&imgil=km2Z3X1TLDJb0M%253A%253Bhttps%253A%252F%252Fencrypted-tbn1.gstatic.com%252Fimages%253Fq%253Dtbn%253AANd9GcRZ-BKzchgpLe1UBl4DMSEheEeI2zZegsVJSA9DS9PcoioWiNrB%253B1275%253B1650%253B9j5RPXytsQNrrM%253Bhttp%25253A%25252F%25252Fwww.kimtrends.com%25252FCredit-card-authorization-form.html&sa=X&ei=rf6vUsbtIcbYrQf6zYHQCw&ved=0CEYQ9QEwAA&biw=1280&bih=642#q=credit+card+form+full+image&tbm=isch&facrc=_&imgdii=_&imgrc=p4RgIAJnWO2cLM%3A%3BmYv6kLtFLnz3IM%3Bhttp%253A%252F%252Fimg.docstoccdn.com%252Fthumb%252Forig%252F69555974.png%3Bhttp%253A%252F%252Fwww.docstoc.com%252Fdocs%252F69555974%252FDiscount-Authorization-Form-Credit-Card-Authorization-Form%3B1275%3B1650) no-repeat  left top;"></canvas>
</div>

<script>
    var c = document.getElementById("tool_sketch");
    var ctx = c.getContext("2d");

    ctx.globalAlpha = 25 / 100;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);

      function buttonClicked() {
      var c = document.getElementById("tool_sketch");
      var ctx = c.getContext("2d");


      ctx.globalAlpha = 25 / 100;
      ctx.fillStyle = "#FF0000";

      // use this as the new position
     ctx.fillRect(416, 241, 625, 279);
  }
  function buttonClicked1() {
      var c = document.getElementById("tool_sketch");
      var ctx = c.getContext("2d");
      // Do what you need here
      alert('change position');


      ctx.globalAlpha = 25 / 100;
      ctx.fillStyle = "#FF0000";

      // use this as the new position
      ctx.fillRect(242, 359, 337, 423);
  }

 function buttonClicked2() {
          var c = document.getElementById("tool_sketch");
          var ctx = c.getContext("2d");
 ctx.globalAlpha = 25 / 100;
          ctx.fillStyle = "#FF0000";

          // use this as the new position
          ctx.fillRect(245, 394, 389, 416);
</script>

<input type="button" id="firstclick" onclick="buttonClicked()" value="name" />
<input type="button" id="secondclick" onclick="buttonClicked1()" value="address" />
<input type="button" id="thirdclick" onclick="buttonClicked2()"  value="phone" />

here i am fixing the image coordinates but it is not matching the exact pixel of the background image please help

score 1 · Accepted Answer · answered Dec 16 '13 at 14:20

1

You have nothing in your posted code that shows "columns" or tables of any sort. If you want to figure out how to attach to the click event of the buttons, you use onclick = "myClickFunction()" More of this can be seen here: http://jsfiddle.net/3SzKS/

answered Dec 16 '13 at 14:20

aaron-bond

3,101
3
24
41

i need to function to change the position of the **red rectangle box** as i set the pixel value of the image using javascript code in button click event – user2817874 Dec 16 '13 at 14:32
OK, I think you are misunderstanding how the canvas works. You are just "drawing" onto a surface so think of this more as deleting one rectangle and drawing another. Shown here: http://jsfiddle.net/3SzKS/1/ – aaron-bond Dec 16 '13 at 14:45
@user2817874 did this help you achieve what you wanted? – aaron-bond Dec 16 '13 at 16:03
give me command to clear the rectangle of that position to be clear – user2817874 Dec 17 '13 at 07:19
@user2817874 did you even read the jsfiddle link? The code is: ctx.clearRect(0,0, 500, 500); // 500 is an arbitrary amount, I wanted to clear the whole canvas so specified the width – aaron-bond Dec 17 '13 at 09:13
yes i seen that link, and i also modified it. But another query is that it is not taking the image coordinates rather than it taking screen coordinate – user2817874 Dec 17 '13 at 10:04
how can i zoom the background – user2817874 Dec 18 '13 at 07:09
http://stackoverflow.com/questions/3420975/html5-canvas-zooming --> this should give you some pointers – aaron-bond Dec 18 '13 at 10:05
how to control div scroll if i set the bottom of the image pixel to my button click even it should be focus in front with out scrolling the box – user2817874 Dec 23 '13 at 08:11
i used this code for auto scroll `var myDiv = document.getElementById('specificDiv'); myDiv.scrollTop = 0;` this code is working when it is in normal view but when i zoom the image it not working – user2817874 Dec 24 '13 at 11:45
how can i get jpeg image from the web services using javascript – user2817874 Dec 27 '13 at 11:12
please provide me some of the link for reference to understand the web service concept – user2817874 Dec 27 '13 at 11:13
The answers listed here will help get you started but I recommend you start posting new questions instead of relying on answers in this thread: http://stackoverflow.com/questions/20675833/is-there-any-web-service-available-to-get-image-using-ajax – aaron-bond Jan 02 '14 at 11:32

To change the position of the rectangle when i click on the button using html5 canvas

1 Answers1