Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Animation Frame Guard
ID	6567352392007680
Created	2 years ago, 1650262023199
Updated	2 years ago, 1653858889526
Code	<!DOCTYPE html> <!-- Although `setInterval` works fine in the KA webpage environment, `requestAnimationFrame` will compound on restart. You can see this in action by removing the animation frame guard and reloading the program multiple times. You'll notice that the square in the canvas moves faster and faster. This is because animation frame requests aren't cancelled. A workaround to this problem is storing the animation frame request ID in the parent window to avoid loss on reload. A more sophisticated approach is required to implement this in PJS projects. You can take a look at how the Essentials library does things here: https://github.com/bhavjitChauhan/Essentials/tree/master/src/core/injections --> <html> <head> <meta charset="utf-8"> <title>Animation Frame Guard</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = canvas.width = document.documentElement.clientWidth; var height = canvas.height = document.documentElement.clientHeight; var i = 0; // Animation frame guard if (window.parent.requestID) window.cancelAnimationFrame(window.parent.requestID); (function draw() { // requestID update window.parent.requestID = window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.fillRect(i, height / 2 - 50, 100, 100); i = ++i % (width - 100); })(); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOTjp_VCww
Votes	4
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Aliquis
Author Name	bhavjitChauhan
Author ID	kaid_376749826184384230772276
Author Profile Access	PUBLIC

Archive Data

Added	7 months ago, 1718321550772
Updated	7 months ago, 1718321550772
Source Deleted	unknown