profesor08

let prevX = 0;

function handleImage(e){
 ...
  ctx.drawImage(img,  prevX, 0, 300, 300)
  prevX = img.width;
...
}

precision highp float;
float mirrored(float v) {
 float m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}

vec2 mirrored(vec2 v) {
 vec2 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
vec3 mirrored(vec3 v) {
 vec3 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
vec4 mirrored(vec4 v) {
 vec4 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
float tri(float v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec2 tri(vec2 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec3 tri(vec3 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec4 tri(vec4 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
#define PI_2 6.283185307179586
#define PI_H 1.5707963267948966
varying vec2 vUv;
varying vec2 vUv1;
varying vec2 vUv2;
uniform vec4 time;
uniform float progress;
uniform vec3 mask;
uniform float rotation;
uniform vec4 translateDelay;
uniform vec2 accel;
uniform vec4 waveAmpFreq;
uniform vec4 waveSpeedBlend;
uniform vec4 pixels;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main(void) {
 vec2 uv = gl_FragCoord.xy / pixels.xy;
 float p = fract(progress + mask.z);

 float delayValue = p * (1.0 + translateDelay.z + translateDelay.w) - uv.y * translateDelay.w - (1.0 - uv.x) * translateDelay.z;
 delayValue = clamp(delayValue, 0.0, 1.0);

 vec2 translateValue = p + delayValue * accel;
 vec2 translateValue1 = translateDelay.xy * translateValue;
 vec2 translateValue2 = translateDelay.xy * (translateValue - 1.0 - accel);
 vec2 w = sin(time.y * waveSpeedBlend.xy + vUv.yx * waveAmpFreq.zw) * waveAmpFreq.xy;
 vec2 xy = (tri(p) * waveSpeedBlend.z + tri(delayValue) * waveSpeedBlend.w) * w;
 vec2 uv1 = vUv1 + translateValue1 + xy;
 vec2 uv2 = vUv2 + translateValue2 + xy;
 vec4 rgba1 = texture2D(texture1, mirrored(uv1));
 vec4 rgba2 = texture2D(texture2, mirrored(uv2));
 vec4 rgba = mix(rgba1, rgba2, delayValue);
 rgba = mix(vec4(0.0, 0.0, 0.0, 1.0), rgba, mask.y);
 rgba = mix(vec4(0.0), rgba, float(abs(uv.y * 2.0 - 1.0) <= mask.x));
 rgba.rgb *= 0.7;
 gl_FragColor = rgba;

}

let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")

document.body.appendChild(canvas);

let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
let canDrawSelection = false;

canvas.addEventListener("mousedown", function(e) {
	canDrawSelection = true;
	x1 = e.clientX;
	y1 = e.clientY;
	x2 = e.clientX;
	y2 = e.clientY;
});

canvas.addEventListener("mouseup", function(e) {
	canDrawSelection = false;
});

canvas.addEventListener("mousemove", function(e) {
	x2 = e.clientX;
	y2 = e.clientY;
});

function drawSelection() {
	if (canDrawSelection === true) {
		ctx.beginPath();
		ctx.lineWidth="2";
		ctx.strokeStyle="white";
		ctx.rect(x1, y1, x2 - x1, y2 - y1);
		ctx.stroke();
	}
}

function render() {
	ctx.canvas.width = window.innerWidth;
	ctx.canvas.height = window.innerHeight;
	ctx.fillStyle = "#2B2E35";
	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
	drawSelection();
}

function animate() {
	requestAnimationFrame(animate);
	render();
}

animate();