Drawing square by using coordinate

Drawing square by using coordinate

  

Hi everyone,

i have an image (red square), and i need to draw some squares into it based on some attributes like x and y coordinate, width, and height.
is there any way to do that?

Thank you

You need to learn Javascript Canvas Drawing to do that.

Below are some example out of my head, not guaranteed to work...


First you need Image element defined in html:

var img = document.createElement("img");

img.setAttribute('crossOrigin', 'anonymous');

img.src="https://xxxxxxxxx";

img.onload = function {

   -- canvas drawing goes here, after load image

}


Then you need a Canvas Draw Image and Rectangle after image load:

img.onload = function () {

   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext("2d");

   canvas.width = img.width;

   canvas.height = img.height;

   ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

   ctx.rect(20,20,150,100);

   ctx.stroke();

}

This is the real working Javascript source code, but will need more works to suit your needs.

But this is useful for you to learn how to draw JS canvas.


JSFiddle:

https://jsfiddle.net/aop80r0z/8/


Code:

var img = document.createElement("img");

img.src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg";

img.onload = function () {

   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext("2d");

   canvas.width = img.width;

   canvas.height = img.height;

   ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

   ctx.rect(20,20,150,150);
   ctx.rect(180,50,200,140);

   ctx.stroke();
   
   document.body.appendChild(canvas);

};

Harlin Setiadarma wrote:

This is the real working Javascript source code, but will need more works to suit your needs.

But this is useful for you to learn how to draw JS canvas.


JSFiddle:

https://jsfiddle.net/aop80r0z/8/


Code:

var img = document.createElement("img");

img.src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg";

img.onload = function () {

   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext("2d");

   canvas.width = img.width;

   canvas.height = img.height;

   ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

   ctx.rect(20,20,150,150);
   ctx.rect(180,50,200,140);

   ctx.stroke();
   
   document.body.appendChild(canvas);

};


thankyou Harlin,

but then, is it possible to add listener on those small squares to call client action?

If you want a clickable rectangle, best way is using overlapping containers. 

Parent container with css position: relative and an image background

Multiple Child container with css position: fixed and bounded to top left (I forgot those css codes but eg top: 10px; left: 50px;) and also have border: 2px (draw box).

You can put OnClick event on that child container.