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?

can you be a bit more specific... the `ctx.getImageData(sx, sy, sw, sh);` has all you need, no? _ _ _ https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData — Helder Sepulveda, Mar 24 '20 at 14:04
Do you need `context.canvas.width` and `context.canvas.height`? — tevemadar, Mar 24 '20 at 14:30
Does this answer your question? [How do I get the width and height of a HTML5 canvas?](https://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas) — tevemadar, Mar 27 '20 at 12:40

score 1 · Accepted Answer · answered Mar 24 '20 at 13:57

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>

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

1 Answers1