single channel image from HTML Canvas

Question

I want to reduce the dimensions of the image obtained from a canvas

const imgData = this.ctx.getImageData(
  0,
  0,
  280,
  280
);
const img_arr = new ImageData(imgData.data, imgData.width, imgData.height);
// ImageData { width: 280, height: 280, data: Uint8ClampedArray(313600) }
console.log(img_arr);

length 313600 = 280 x 280 x 4 (RGBA)

Is there a way to obtain single chanel image directly rather than looping the rgba image array??

var cnt = 0;
for (var i = 0; i < imgData.data.length; i += 4) {
  grayImgData.data[cnt] = imgData.data[i];
cnt+=1;
}