spite/plotly-ccapture.html

## plotly-ccapture.html
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="CCapture.all.min.js">

	</script>
</head>
<body>
	<div id="elementToShare" class="elementToShare">
		<div class="recording-controls">  <button type="button" id="startRecording" name="button">Start Recording</button>
			<button type="button" id="stopRecording" name="button">Stop Recording</button></div>
			<div id="myDiv" style="width:100%;height:100%"></div>
		</div>
		<script>
			var oHCEgC = HTMLCanvasElement.prototype.getContext;
			HTMLCanvasElement.prototype.getContext = function() {
				console.log( arguments );
				if( arguments[ 1 ] ) {
					arguments[ 1 ].preserveDrawingBuffer = true
					arguments[ 1 ].alpha = true
				}
				return oHCEgC.apply( this, arguments )
			}
		</script>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
		<script type="text/javascript">
			var trace1 = {
				z: [
				[2, 2, 0, 0, 5, 5, 6, 6, 6, 6],
				[1, 1, 0, 0, 0, 5, 1, 0, 0, 0],
				[1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
				[1, 2, 0, 0, 0, 3, 3, 5, 5, 5],
				[5, 2, 2, 3, 1, 1, 3, 5, 5, 6],
				[5, 2, 2, 3, 1, 1, 6, 5, 6, 6],
				[3, 6, 6, 6, 6, 6, 6, 5, 5, 5],
				[0, 6, 6, 6, 1, 1, 6, 2, 2, 5],
				[0, 0, 2, 1, 1, 1, 2, 2, 2, 5],
				[0, 2, 2, 1, 1, 2, 2, 2, 4, 4],
				],
				cmax: 5,
				cmin: 2,
				colorscale: [
				["0", "#FF0000"],
				["0.25", "#FFFFFF"],
				["0.555555555556", "#0000ff"],
				["0.777777777778", "#6CCE59"],
				["1", "#FDE725"]
				],
				type: 'surface',
				opacity: 1,
				name: "trace_name",
				contours: {
					y: {
						show: true,
					}
				},
			};

			var data = [trace1];
			var layout = {
				margin: {
					l: 10,
					r: 10,
					b: 20,
					t: 20
				}
			};

			Plotly.newPlot('myDiv', data);
		</script>

		<script type="text/javascript">
			canvas = document.querySelector('.elementToShare canvas');
			var capturer = new CCapture( {
				format: 'png',
				framerate: 60,
				verbose: true
			} );

			$("#startRecording").click(function(){
				capturer.start();
			});

			function render(){
				requestAnimationFrame(render);
				capturer.capture( canvas );
			}

			$("#stopRecording").click(function(){
				capturer.stop();
				capturer.save();
			});
			render();
		</script>

	</body>
</html>
	<html>
	<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="CCapture.all.min.js">

	</script>
	</head>
	<body>
	<div id="elementToShare" class="elementToShare">
	<div class="recording-controls"> <button type="button" id="startRecording" name="button">Start Recording</button>
	<button type="button" id="stopRecording" name="button">Stop Recording</button></div>
	<div id="myDiv" style="width:100%;height:100%"></div>
	</div>
	<script>
	var oHCEgC = HTMLCanvasElement.prototype.getContext;
	HTMLCanvasElement.prototype.getContext = function() {
	console.log( arguments );
	if( arguments[ 1 ] ) {
	arguments[ 1 ].preserveDrawingBuffer = true
	arguments[ 1 ].alpha = true
	}
	return oHCEgC.apply( this, arguments )
	}
	</script>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<script type="text/javascript">
	var trace1 = {
	z: [
	[2, 2, 0, 0, 5, 5, 6, 6, 6, 6],
	[1, 1, 0, 0, 0, 5, 1, 0, 0, 0],
	[1, 1, 0, 0, 0, 1, 1, 0, 0, 0],
	[1, 2, 0, 0, 0, 3, 3, 5, 5, 5],
	[5, 2, 2, 3, 1, 1, 3, 5, 5, 6],
	[5, 2, 2, 3, 1, 1, 6, 5, 6, 6],
	[3, 6, 6, 6, 6, 6, 6, 5, 5, 5],
	[0, 6, 6, 6, 1, 1, 6, 2, 2, 5],
	[0, 0, 2, 1, 1, 1, 2, 2, 2, 5],
	[0, 2, 2, 1, 1, 2, 2, 2, 4, 4],
	],
	cmax: 5,
	cmin: 2,
	colorscale: [
	["0", "#FF0000"],
	["0.25", "#FFFFFF"],
	["0.555555555556", "#0000ff"],
	["0.777777777778", "#6CCE59"],
	["1", "#FDE725"]
	],
	type: 'surface',
	opacity: 1,
	name: "trace_name",
	contours: {
	y: {
	show: true,
	}
	},
	};

	var data = [trace1];
	var layout = {
	margin: {
	l: 10,
	r: 10,
	b: 20,
	t: 20
	}
	};

	Plotly.newPlot('myDiv', data);
	</script>

	<script type="text/javascript">
	canvas = document.querySelector('.elementToShare canvas');
	var capturer = new CCapture( {
	format: 'png',
	framerate: 60,
	verbose: true
	} );

	$("#startRecording").click(function(){
	capturer.start();
	});

	function render(){
	requestAnimationFrame(render);
	capturer.capture( canvas );
	}

	$("#stopRecording").click(function(){
	capturer.stop();
	capturer.save();
	});
	render();
	</script>

	</body>
	</html>