How to use the canvas/imagedata/GetIndex.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 / canvas10-getIndex.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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}// 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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}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, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}const ctx = GetContext(this.canvas);
ctx.drawImage(file.data, 0, 0);
const imageData = GetImageData(ctx);
console.log(imageData.width, 'x', imageData.height, 'len', imageData.data.length);
console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
console.log('319 x 199 - index', GetIndex(imageData, 319, 199));
}export default function SetPixel (imageData, x, y, red = 0, green = 0, blue = 0, alpha = 255) {
let index = GetIndex(imageData, x, y);
if (imageData.data[index] >= 0)
{
imageData.data[index] = red;
imageData.data[++index] = green;
imageData.data[++index] = blue;
imageData.data[++index] = alpha;
return true;
}
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