tweak

Author: Rich Harris

content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/README.md

@@ -7,7 +7,7 @@ The readonly `this` binding applies to every element (and component) and allows
 ```svelte
 /// file: App.svelte
 <canvas
-	bind:this={canvas}
+	+++bind:this={canvas}+++
 	width={32}
 	height={32}
 ></canvas>

content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/app-a/src/lib/App.svelte

@@ -5,53 +5,40 @@
 
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
-		let frame = requestAnimationFrame(loop);
 
-		function loop(t) {
+		let frame = requestAnimationFrame(function loop(t) {
 			frame = requestAnimationFrame(loop);
 
-			const imageData = ctx.getImageData(
-				0,
-				0,
-				canvas.width,
-				canvas.height
-			);
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-			for (
-				let p = 0;
-				p < imageData.data.length;
-				p += 4
-			) {
+			for (let p = 0; p < imageData.data.length; p += 4) {
 				const i = p / 4;
 				const x = i % canvas.width;
 				const y = (i / canvas.width) >>> 0;
 
-				const r =
-					64 +
-					(128 * x) / canvas.width +
-					64 * Math.sin(t / 1000);
-				const g =
-					64 +
-					(128 * y) / canvas.height +
-					64 * Math.cos(t / 1000);
-				const b = 128;
+				const red = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
+				const green = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
+				const blue = 128;
 
-				imageData.data[p + 0] = r;
-				imageData.data[p + 1] = g;
-				imageData.data[p + 2] = b;
+				imageData.data[p + 0] = red;
+				imageData.data[p + 1] = green;
+				imageData.data[p + 2] = blue;
 				imageData.data[p + 3] = 255;
 			}
 
 			ctx.putImageData(imageData, 0, 0);
-		}
+		});
 
 		return () => {
 			cancelAnimationFrame(frame);
 		};
 	});
 </script>
 
-<canvas width={32} height={32} />
+<canvas
+	width={32}
+	height={32}
+/>
 
 <style>
 	canvas {
@@ -62,8 +49,8 @@
 		height: 100%;
 		background-color: #666;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask-size: 40%;
+		mask-size: 60vmin;
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		-webkit-mask-size: 40%;
+		-webkit-mask-size: 60vmin;
 	}
 </style>

content/tutorial/03-advanced-svelte/05-bindings/05-bind-this/app-b/src/lib/App.svelte

@@ -5,45 +5,29 @@
 
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
-		let frame = requestAnimationFrame(loop);
 
-		function loop(t) {
+		let frame = requestAnimationFrame(function loop(t) {
 			frame = requestAnimationFrame(loop);
 
-			const imageData = ctx.getImageData(
-				0,
-				0,
-				canvas.width,
-				canvas.height
-			);
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
-			for (
-				let p = 0;
-				p < imageData.data.length;
-				p += 4
-			) {
+			for (let p = 0; p < imageData.data.length; p += 4) {
 				const i = p / 4;
 				const x = i % canvas.width;
 				const y = (i / canvas.width) >>> 0;
 
-				const r =
-					64 +
-					(128 * x) / canvas.width +
-					64 * Math.sin(t / 1000);
-				const g =
-					64 +
-					(128 * y) / canvas.height +
-					64 * Math.cos(t / 1000);
-				const b = 128;
+				const red = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
+				const green = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
+				const blue = 128;
 
-				imageData.data[p + 0] = r;
-				imageData.data[p + 1] = g;
-				imageData.data[p + 2] = b;
+				imageData.data[p + 0] = red;
+				imageData.data[p + 1] = green;
+				imageData.data[p + 2] = blue;
 				imageData.data[p + 3] = 255;
 			}
 
 			ctx.putImageData(imageData, 0, 0);
-		}
+		});
 
 		return () => {
 			cancelAnimationFrame(frame);
@@ -66,8 +50,8 @@
 		height: 100%;
 		background-color: #666;
 		mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		mask-size: 40%;
+		mask-size: 60vmin;
 		-webkit-mask: url(svelte-logo-mask.svg) 50% 50% no-repeat;
-		-webkit-mask-size: 40%;
+		-webkit-mask-size: 60vmin;
 	}
 </style>