C RUBY-ON-RAILS MYSQL ASP.NET DEVELOPMENT RUBY .NET LINUX SQL-SERVER REGEX WINDOWS ALGORITHM ECLIPSE VISUAL-STUDIO STRING SVN PERFORMANCE APACHE-FLEX UNIT-TESTING SECURITY LINQ UNIX MATH EMAIL OOP LANGUAGE-AGNOSTIC VB6 MSBUILD

# edit canvas pixel coordinates

By : MingJie Loh
Date : November 22 2020, 03:01 PM
Hope that helps You can calculate position into a buffer using coordinates doing (byte array):
code :
``````pos = (y * width + x) << 2;    // << 2 = x4 but slightly faster + forces integer
``````
``````pos = y * width + x
``````
``````function getBitmap(ctx) {
let idata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
return {
imageData: idata,
buffer32 : new Uint32Array(idata.data.buffer)    // just a view/reference
}
}
``````
``````function commit(ctx, bitmap) {
ctx.putImageData(bitmap.imageData, 0, 0)
}
``````
``````function setPixel(bitmap, x, y, r, g, b, a = 255) {  // = 255 for ES6 code, remove otherwise
let pixel = a << 24 | b << 16 | g << 8 | r;        // make 32-bit value of ABGR
let pos = (y * bitmap.imageData.width + x)|0;      // calc. position, force integer
bitmap.buffer32[pos] = pixel;                      // set pixel in buffer
}
``````
``````const ctx = c.getContext("2d");
const r = Math.random;  // just to simplify example loop

// obtain the bitmap
const bmp = getBitmap(ctx);

// draw something
for(let i = 0, ra = 300; i < 21; i += 0.01) {
setPixel(
bmp,                       // bitmap
(160+ra*Math.cos(i))|0,    // x
(100+ra*Math.sin(i))|0,    // y
255*r(), 255*r(), 255*r()  // r, g, b [,a]
);
ra *= 0.997;
}

// commit changes
commit(ctx, bmp);

function getBitmap(ctx) {
let idata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
return {
imageData: idata,
buffer32 : new Uint32Array(idata.data.buffer)    // just a view/reference
}
}

function commit(ctx, bitmap) {
ctx.putImageData(bitmap.imageData, 0, 0)
}

function setPixel(bitmap, x, y, r, g, b, a = 255) {  // = 255 for ES6 code, remove otherwise
let pixel = a << 24 | b << 16 | g << 8 | r;        // make 32-bit value of ABGR
let pos = (y * bitmap.imageData.width + x)|0;      // calc. position, force integer
bitmap.buffer32[pos] = pixel;                      // set pixel in buffer
}``````
``#c {border:1px solid; background:#000}``
``<canvas id=c width=320 height=320></canvas>``
``````ctx.beginPath();

// draw all pixels here using integer positions for x and y
ctx.rect(x, y, 1, 1);

// and finally fill in current fill style
ctx.fill();
``````
``````ctx.fillStyle = pixelColor;
ctx.fillRect(x, y, 1, 1);
``````

Share :

## How do I correctly translate pixel coordinates to canvas coordinates in Android?

By : user3350509
Date : March 29 2020, 07:55 AM
Hope this helps If i understand correctly you have a canvas View inside surfaceview. If so try VIEW.getLeft() | getTop() that returns the left | top position of the view relative to it's parent.
code :
``````float x= e.getX() - canvasView.getLeft();
float y= e.getY() - canvasView.getTop();
``````

## Get X and Y pixel coordinates when iterating over HTML5 canvas getImageData

By : Nolhain
Date : March 29 2020, 07:55 AM
Hope this helps A Simple Arithmetic Sequence:
Divide the linear position by the width. That's your Y-coordinate. Multiply that Y-coordinate by the width, and subtract that value from the linear position. The result is the X coordinate.

## How to get pixel coordinates from canvas polygon (filled area)

By : user3185818
Date : March 29 2020, 07:55 AM
I wish this helpful for you What you need is reverse processing. You can simply iterate canvas and create index and related RGBA values by following formula and compare with filled color.
code :
``````var index = (x + y * imageData.width) * 4;
``````
``````var imageData = ctx.getImageData(0, 0,canvas.width, canvas.height);
var data = imageData.data;
var filled=[];
for(var x=0;x<canvas.width;x++){
for(var y=0;y<canvas.height;y++){
var index = (x + y * imageData.width) * 4;

if(data[index+0]==colorToCheck.R && data[index+1]==colorToCheck.G && data[index+2]==colorToCheck.B && data[index+3]==colorToCheck.A){
var cx={"X":x,"Y":y}; //
filled.push(cx);
}
}
``````

## From cell coordinates to Canvas pixel position on OnSelectCell event in tStringGrid in Delphi

By : alex liu
Date : March 29 2020, 07:55 AM
Hope this helps You can determine cell screen coordinates using CellRect method
P.S. Have you ever tried to integrate controls into StringGrid?

## How to get pixel coordinates of a pixel inside an html5 canvas

By : Mick
Date : March 29 2020, 07:55 AM
With these it helps I know that you can get the value of each pixel inside the html5 Canvas using getImageData() and .data() but is there a way to get their coordinates and not just their values?