LayoutTests/fast/canvas/canvas-put-image-data-no-draw.html - WebKit - Git at Google

 <body>
     <canvas id="target" width="400" height="400"></canvas>
     <script>
         const targetCanvas = document.getElementById('target');
         const target = targetCanvas.getContext('2d');

         const canvasWidth = targetCanvas.width;
         const canvasHeight = targetCanvas.height

         var sourceCanvas = document.createElement('canvas');
         sourceCanvas.width  = canvasWidth;
         sourceCanvas.height = canvasHeight;

         const source = sourceCanvas.getContext('2d');

         let progressX = 0;
         let progressY = 0;
         const paintSize = 100;

         source.fillStyle = 'green';
         source.fillRect(0, 0, canvasWidth, canvasHeight);
         const imagedata = source.getImageData(0, 0, canvasWidth, canvasHeight);

         function drawLoop() {
             target.putImageData(imagedata, 0, 0, progressX, progressY, paintSize, paintSize);

             progressX += paintSize;

             if (progressX + paintSize <= canvasWidth) {
                 requestAnimationFrame(drawLoop);
                 return;
             }

             if (progressY + paintSize > canvasHeight) {
                 if (window.testRunner)
                     testRunner.notifyDone();
                 return;
             }

             progressX = 0;
             progressY += paintSize;
             requestAnimationFrame(drawLoop);
         }

         if (window.testRunner)
             testRunner.waitUntilDone();

         requestAnimationFrame(drawLoop);
     </script>
 </body>
	<body>
	<canvas id="target" width="400" height="400"></canvas>
	<script>
	const targetCanvas = document.getElementById('target');
	const target = targetCanvas.getContext('2d');

	const canvasWidth = targetCanvas.width;
	const canvasHeight = targetCanvas.height

	var sourceCanvas = document.createElement('canvas');
	sourceCanvas.width = canvasWidth;
	sourceCanvas.height = canvasHeight;

	const source = sourceCanvas.getContext('2d');

	let progressX = 0;
	let progressY = 0;
	const paintSize = 100;

	source.fillStyle = 'green';
	source.fillRect(0, 0, canvasWidth, canvasHeight);
	const imagedata = source.getImageData(0, 0, canvasWidth, canvasHeight);

	function drawLoop() {
	target.putImageData(imagedata, 0, 0, progressX, progressY, paintSize, paintSize);

	progressX += paintSize;

	if (progressX + paintSize <= canvasWidth) {
	requestAnimationFrame(drawLoop);
	return;
	}

	if (progressY + paintSize > canvasHeight) {
	if (window.testRunner)
	testRunner.notifyDone();
	return;
	}

	progressX = 0;
	progressY += paintSize;
	requestAnimationFrame(drawLoop);
	}

	if (window.testRunner)
	testRunner.waitUntilDone();

	requestAnimationFrame(drawLoop);
	</script>
	</body>