Get x, y coordinate on the 4 corners of an image

Question

I can get the coordinate x, y of an image with:

var pixelData = context.getImageData(offsetX, offsetY, 1, 1).data;

How can I calculate the coordinate of the corners only?

Answer 1

What you would need is the width and the height of the canvas. In the example below, or usually it is assumed that the image cordinates on the top-left are 0,0.

 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.fillStyle = 'blue'; context.rect(0, 0, 200, 200); context.fill(); var width = canvas.width; var height = canvas.height; var topLeft =[ 0 , 0]; var topRight = [width,0]; var bottomLeft = [0,height]; var bottomRight = [width,height]; // If you are getting the pixels on the possible points then use this var topLeft =[ 0 , 0]; var topRight = [width -1,0]; var bottomLeft = [0,height -1 ]; var bottomRight = [width -1,height-1];

 <canvas id="canvas" width="400" height="400"><canvas>