Merge remote-tracking branch 'origin/main' into 11591-OffScreenCanvas

bsmth · bsmth · commit bdb70b0c8b24 · 2022-08-30T16:42:12.000+02:00
diff --git a/canvas/pixel-manipulation/color-picker.html b/canvas/pixel-manipulation/color-picker.html
@@ -29,7 +29,7 @@
 				<td align="center" class="color-cell" id="selected-color"></td>
 			</tr>
 		</tbody>
-	<table>
+	</table>
 	<script src="color-picker.js"></script>
   </body>
 </html>
diff --git a/canvas/pixel-manipulation/color-picker.js b/canvas/pixel-manipulation/color-picker.js
@@ -1,32 +1,29 @@
-var img = new Image();
+const img = new Image();
 img.crossOrigin = 'anonymous';
 img.src = './assets/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+img.addEventListener('load', () => {
   ctx.drawImage(img, 0, 0);
   img.style.display = 'none';
-};
-var hoveredColor = document.getElementById('hovered-color');
-var selectedColor = document.getElementById('selected-color');
+});
+const hoveredColor = document.getElementById('hovered-color');
+const selectedColor = document.getElementById('selected-color');
 
 
 function pick(event, destination) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
+  const bounding = canvas.getBoundingClientRect();
+  const x = event.clientX - bounding.left;
+  const y = event.clientY - bounding.top;
+  const pixel = ctx.getImageData(x, y, 1, 1);
+  const data = pixel.data;
 
-	const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
-	destination.style.background = rgba;
-	destination.textContent = rgba;
+  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
+  destination.style.background = rgba;
+  destination.textContent = rgba;
 
-	return rgba;
+  return rgba;
 }
 
-canvas.addEventListener('mousemove', function(event) {
-	pick(event, hoveredColor);
-});
-canvas.addEventListener('click', function(event) {
-	pick(event, selectedColor);
-});
+canvas.addEventListener('mousemove', event => pick(event, hoveredColor));
+canvas.addEventListener('click', event => pick(event, selectedColor));
diff --git a/picture-in-picture/index.html b/picture-in-picture/index.html
@@ -11,8 +11,8 @@
 
 			<video src="assets/bigbuckbunny.mp4" id="video" muted autoplay width="300"></video>
 
-      <div id="credits"><a href="https://peach.blender.org/download/">Video by Blender</a>;
-      <a href="https://peach.blender.org/about/">licensed CC-BY 3.0</a></div>
+      <div id="credits"><a href="https://peach.blender.org/download/" target="_blank">Video by Blender</a>;
+      <a href="https://peach.blender.org/about/" target="_blank">licensed CC-BY 3.0</a></div>
 
       <div id="controlbar">
 				<p class="no-picture-in-picture">
