CODEWITHSUNDEEP
javascriptcanvaswebgl
kashik
kashik

Reputation: 9

Copy canvas pixels from a 2D context to another - Javascript

In javascript, I am writing an audio buffer to a canvas for spectrum visualisation. I am currently working with the audio signal and pasting on a 2D context of a canvas. I want to make a similar effect to the OpenGL GL_CLAMP_TO_EDGE, copy a vertical pixel line (the last on the right) and extend it as lines in another 2d context.

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);

What's the best way to do this? with a lot of ctx.strokestyle? Thanks in advance

Effect example:

example from online documentation

Upvotes: 0

Views: 191

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

WebGL (1.0) is based on OpenGL ES 2.0 API.

CLAMP_TO_EDGE is a valid argument for the texture parameters TEXTURE_WRAP_S and TEXTURE_WRAP_T, in OpenGL ES 2.0 as well as in WebGL 1.0.

For instance:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

Upvotes: 1

Related Questions