How to use the canvas/imagedata/GetXY.js function in canvas
To help you get started, we’ve selected a few canvas examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
photonstorm / lazer-dev / src / canvas / canvas17-getXY.js View on Github 
// Draw the image
const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}loadComplete (file) {
// Draw the image
const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}loadComplete (file) {
// Draw the image
const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}loadComplete (file) {
// Draw the image
const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height);
console.log('Index 0', GetXY(imageData, 0)); // 0x0
console.log('Index 4', GetXY(imageData, 4)); // 1x0
console.log('Index 40', GetXY(imageData, 40)); // 10x0
console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
}export default function ScanBottomToTop (imageData, tolerance = 0) {
for (let i = imageData.data.length; i > 0; i -= 4)
{
if (imageData.data[i] > tolerance)
{
return GetXY(imageData, i - 3);
}
}
return false;
}
Popular canvas functions
- canvas.Canvas
- canvas.createCanvas
- canvas.Image
- canvas.loadImage
- canvas.registerFont
- canvas/BackgroundColor.js
- canvas/Canvas.js
- canvas/DrawImage.js
- canvas/GetContext.js
- canvas/graphics/Clear.js
- canvas/graphics/Fill.js
- canvas/graphics/LineStyle.js
- canvas/graphics/Rectangle.js
- canvas/graphics/Stroke.js
- canvas/imagedata/GetImageData.js
- canvas/imagedata/GetIndex.js
- canvas/imagedata/GetXY.js
- canvas/imagedata/PutImageData.js
- canvas/ResetTransform.js
- canvas