39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LOLED</title>
|
|
</head>
|
|
<body>
|
|
<canvas></canvas>
|
|
<p>To send canvas of the page to LOLED click the following link :
|
|
<a id="link" href="">LOLED that canvas !</a>
|
|
</p>
|
|
<p>You can also drag this link in your bookmarks to call it on any page with a canvas</p>
|
|
<script>
|
|
document.getElementById("link").href = `javascript:(function(){let s = document.createElement('script');s.src = '${new URL("/js/grab-canvas.js", document.documentElement.baseURI).toString()}';document.body.appendChild(s);})()`
|
|
</script>
|
|
<script>
|
|
const canvas = document.querySelector("canvas");
|
|
canvas.width = 500
|
|
canvas.height = 500
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
let incr = 0;
|
|
|
|
function draw(){
|
|
ctx.fillStyle = `hsl(${incr}deg 100% 50%)`;
|
|
ctx.fillRect(-50, -50, 100, 100)
|
|
incr += 1;
|
|
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
ctx.translate(canvas.width/2, canvas.height/2),
|
|
draw()
|
|
|
|
</script>
|
|
</body>
|
|
</html> |