Как сделать скриншот canvas webgl?

Question

[m325]

Превью 1
Превью 2
Помогите, пожалуйста задавал вопрос Сделать снимок с canvas холста?, ссылки от коллег помогли. Сохранить слой c canvas video получается. Пробуя сохранить другие слои, сохрнаяет пустой png. Файл.

JS который сохраняет canvas

// Get handles on the video and canvas elements
		var video = document.querySelector('#videoel');
		// var img = document.querySelector('#overlay');
		var canvas = document.querySelector('#test');
		// Get a handle on the 2d context of the canvas element
		var context = canvas.getContext('2d');
		// Define some vars required later
		var w, h, ratio;
		
		// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
		video.addEventListener('loadedmetadata', function() {
			// Calculate the ratio of the video's width to height
			ratio = video.videoWidth / video.videoHeight;
			// Define the required width as 100 pixels smaller than the actual video's width
			w = video.videoWidth - 100;
			// Calculate the height based on the video's width and the ratio
			h = parseInt(w / ratio, 10);
			// Set the canvas width and height to the values just calculated
			canvas.width = w;
			canvas.height = h;			
		}, false);
		
		// Takes a snapshot of the video
		function snap() {
			// Define the size of the rectangle that will be filled (basically the entire element)
			context.fillRect(0, 0, w, h);
			// Grab the image from the video
			context.drawImage(video, 0, 0, w, h);

		}
		 






		 $("#btn").on('click',function(){
	canvas.toBlob(function(blob) {
	    saveAs(blob, "pretty image.png");
	});
});

Answer 1

[Large]

Важно создать контекст с параметром preserveDrawingBuffer: true тогда буфер будет сохраняться. А дальше уже можно через canvas.toDataUrl() или gl.readPixels(...) в зависимости от потребностей.