logo
down
shadow

edit canvas pixel coordinates


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 : facebook icon twitter icon
How do I correctly translate pixel coordinates to canvas coordinates in Android?

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

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)

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

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

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?
Related Posts Related Posts :
  • How to get text from selected value in a dropdownlist which is js based
  • window is not defined angular universal third library
  • Angularjs ng-repeat stylization depending on previous value
  • Trying to implement Fittext.js
  • Calculate number of match in array Lodash
  • Jquery Smooth Scroll Using Offset.top
  • How to extract data to React state from CSV file using Papa Parse?
  • How to add unique links to google maps markers
  • How to use if condition in a tool bar in java script
  • Ajax filter in django not showing in HTML
  • data collection with Javascript
  • Rotate image on lightbox2 load
  • Prevent body from scrolling when a Pop-Up is open
  • How to copy files that do not need to be compiled in Gulp?
  • Array not assigned to variable? How does this work and what exactly is it doing?
  • Sorting associative array of objects in javascript
  • Changing Icon in Sap.m.tree having CustomTreeItem
  • Merge two array of objects based on a key
  • javascript in css not working
  • Passing only clicked element to onClick function - reactjs
  • React boilerplate doesn't load js files in the index.html
  • is Child service inside child component visible in the Parent component?
  • Check if data attribute value equals a string
  • How to get value of child tag of a button tag
  • How to access subjects of selected mails in Apple Mail using JavaScript?
  • How to get all dynamically set inline-style CSS in jQuery?
  • Error: Module "html" does not provide a view engine (Express)
  • Random Image in <Div> from array
  • Slider with touch function
  • ReactJS Component Architecture Problems / Nested Components or Single Component Manager
  • Javascript: Caching within Closure doesn't work
  • HTM5 Canvas Drawing App: How Do I Select The Color?
  • Assigning Events using HTML DOM
  • html5 getUserMedia() portrait mode
  • How to avoid 'headers already sent' within Promise chain?
  • Get a result from a react native app integrated into an existing android app
  • Why does the value of input field return undefined
  • How to get return object in jquery uploadFile method
  • Javascript string with arguments to single quotes
  • Understanding JS functions syntax (applies to other languages as well, I'm sure)
  • AngularJS Single Page App: Reference Error, ____ is not defined
  • whatwg-fetch new typescript 2.5.3
  • React.js - Array.unshift() not updating array on front-end
  • JavaScript localeCompare don't sort well [ "aaa-1.0", "aaa-1.1", "aaa-1.01", "aaa-11&
  • Mongoose handle validation error in a promise call and Express middleware
  • Building tree array of objects from flat array of objects
  • How to add a progress bar to file upload using javascript and ajax call?
  • JavaScript: is it permitted to override a standard built-in object?
  • Change the current page of an AJAX datatables
  • Array element is undefined even after pushing elements into it
  • onmousemove event not working
  • Chrome-Extension/JavaScript How to make all links on page have no effect?
  • Websocket issue Internet Explorer
  • sessionStorage value becomes null in other tab in AngularJS
  • Split URL from position x to the end in Javascript
  • How to set value of input field with NgIf in Angular 4
  • invalidStateError for second time screenshare on Chrome
  • How do you pass a value to the variable in a xhr.setRequestHeader?
  • I cant start nodemon on my windows 10
  • Nested if else jumps out from the main if else in javascript
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org