動画（JavaScriptで連続秒針のように滑らかに回転させる）をぼかし、画像とテキストはぼかさない

実現したいこと

1）動画（time.js）をぼかす
2）動画は連続秒針のように滑らかに回転させる
3）画像とテキストはぼかさない

以前（2024/07/20）、teratailで相談させていただいた「光の三原色が構成するアナログ時計」https://teratail.com/questions/a7buymi3o102tb で動く３つの円（赤・青・緑）の輪郭をぼかし、その上に重ねる画像（title.png）とテキストはぼかしたくない。
2週間、Google検索していろいろと試してみましたができません。
ご教授の程、宜しくお願い致します。

発生している問題・分からないこと

最初JavaScript側で「ばかし」を設定すると動作が重く「連続秒針」にならなかった。
そこで別の方法を考えました。スタイルシートを使用して「ばかし」を設定すると「連続秒針」はできているのですが、「ばかし」たくない画像（title.pngは下記補足に添付）とテキストもボケてします。

エラーメッセージ

error
1エラーメッセージはありません

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5
6<script type="text/javascript">
7$(function () {
8    sizing();
9    $(window).resize(function() {
10        sizing();
11    });
12});
13function sizing(){
14    .attr({height:$("#wrapper").height()});
15    .attr({width:$("#wrapper").width()});
16}
17</script>
18<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
19<script src="time.js"></script> <!-- アナログ時計読み込み -->
20</head>
21
22<body marginheight="0" style="filter:blur(10px);position:relative;z-index:0;background-color: black;">
23
24<div style="filter:blur(0);position:absolute;z-index:1;margin: 30px auto auto 30px;"><img src="title.png" width="569" height="112"><br>
25テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
26
27</body>
28</html>

time.js
1const circleSize = 640;
2
3function setup() {
4  createCanvas(windowWidth, windowHeight);
5  background(0);
6  noStroke();
7}
8
9function draw() {
10  translate(width/2, height/2);
11  rotate(-HALF_PI);
12  
13  blendMode(BLEND);
14  background(0);
15  blendMode(DIFFERENCE);
16  fill(255);
17  showTime();
18}
19
20function showTime() {
21  let d = new Date();
22  let hours = d.getHours();
23  let minutes = d.getMinutes();
24  let seconds = d.getSeconds();
25  let milliseconds = d.getMilliseconds();
26  //print(hours + ":" + minutes + ":" + seconds + "." + milliseconds);
27
28  let s = seconds + (milliseconds / 1000);
29  let m = minutes + (s / 60);
30  let h = hours + (m / 60);
31
32  push();
33  fill(0, 0, 255);
34  rotate(h / 12 * TWO_PI);
35  circle(width/5, 0, circleSize);
36  pop();
37
38  push();
39  fill(255, 0, 0);
40  rotate(m / 60 * TWO_PI);
41  circle(width/5, 0, circleSize);
42  pop();
43
44  push();
45  fill(0, 255, 0);
46  rotate(s / 60 * TWO_PI);
47  circle(width/5, 0, circleSize);
48  pop();
49}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

1）JavaScriptでは shadowBlur = 3; を試した結果、動作が重くなった
2）スタイルシートでは filter: blur を試した結果、画面全体がボケてしまう

補足

行動規範の内容に同意します

回答1件

ベストアンサー

bodyではなくcanvasにfiilterすればよいだけでは？

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
2<style>
3body{
4position:relative;
5z-index:0;
6background-color: black;
7}
8canvas{
9 filter:blur(10px);
10}
11</style>
12<script>
13const circleSize = 640;
14function setup() {
15  createCanvas(windowWidth, windowHeight);
16  background(0);
17  noStroke();
18}
19
20function draw() {
21  translate(width/2, height/2);
22  rotate(-HALF_PI);
23  
24  blendMode(BLEND);
25  background(0);
26  blendMode(DIFFERENCE);
27  fill(255);
28  showTime();
29}
30
31function showTime() {
32  let d = new Date();
33  let hours = d.getHours();
34  let minutes = d.getMinutes();
35  let seconds = d.getSeconds();
36  let milliseconds = d.getMilliseconds();
37  //print(hours + ":" + minutes + ":" + seconds + "." + milliseconds);
38
39  let s = seconds + (milliseconds / 1000);
40  let m = minutes + (s / 60);
41  let h = hours + (m / 60);
42
43  push();
44  fill(0, 0, 255);
45  rotate(h / 12 * TWO_PI);
46  circle(width/5, 0, circleSize);
47  pop();
48
49  push();
50  fill(255, 0, 0);
51  rotate(m / 60 * TWO_PI);
52  circle(width/5, 0, circleSize);
53  pop();
54
55  push();
56  fill(0, 255, 0);
57  rotate(s / 60 * TWO_PI);
58  circle(width/5, 0, circleSize);
59  pop();
60}
61</script>
62<div style="filter:blur(0);position:absolute;z-index:1;margin: 30px auto auto 30px;">
63<img src="https://placehold.jp/ff0000/00000/569x112.png?text=test"><br>
64テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>