将画布像素从2D上下文复制到另一个上下文-Javascript

在javascript中，我在画布上编写一个音频缓冲区，用于频谱可视化。我目前正在处理音频信号，并将其粘贴到画布的2D上下文中。我想做一个类似于OpenGL的效果，将线夹到边，复制一条垂直的像素线（最后一条在右边），并在另一个2d环境中将其扩展为线

function init() {
  copyvals();
  requestAnimationFrame(init);
}
requestAnimationFrame(init);

var ctx = spectrocanvas.getContext("2d");
var imageData = ctx.getImageData(spectrocanvas.width-1, 0, 1, spectrocanvas.height);
var data = imageData.data;
var _ctx = othercanvas.getContext("2d");
_ctx.putImageData(imageData, 0, 0);

最好的方法是什么？有很多ctx，strokestyle？ 提前谢谢

效果示例：

是基于

climp_TO_EDGE

是OpenGL ES 2.0和WebGL 1.0中纹理参数

texture_WRAP_S

和

texture_WRAP_T

的有效参数

例如：

gl.texParameteri（gl.TEXTURE\u 2D、gl.TEXTURE\u WRAP\u S、gl.CLAMP\u TO\u EDGE）；