canvas上で、image要素を動かしたい

canvas上で、image要素く動かしたい

canvas上で、image要素が画面の端から端へとループする動きを作成しようとしています。
しかし、画像が表示されません。
エラーコードメッセージが出ているわけでもありません。

二つ目のコードを元に、ボールの部分をimage要素にしてみようという発想です。

ちなみに、
https://www.cow-aka.jp/akabakojoshi/
の背景で、様々な画像が端から端へとループしているのをみて、canvasを触り始めた次第です。

どなたか、助けていただけないのでしょうか？

javascript
1const canvas = document.getElementById('canvas');
2
3function onResize() {
4    canvas.width = innerWidth * devicePixelRatio;
5    canvas.height = 1200;
6}
7window.addEventListener('resize', onResize);
8onResize();
9
10  var ctx = canvas.getContext('2d');
11  
12    var Visual = function(x , y , vx) {
13           this.x = x;
14           this.y = y;
15           this.vx = vx;
16           this.draw = function() {
17           const img = document.createElement('img');
18               img.src = 'img/mv02.jpg';
19               img.addEventListener('load', () => {
20               ctx.drawImage(img, this.x, this.y);
21               });
22             };
23              this.move = function() {
24              this.x += this.vx;
25              if (this.x > canvas.width + 200) {
26                 this.x = x;
27              }
28              };
29           }
30          
31   var myVisual = new Visual(10, 10, 10);
32
33   function clearStage() {
34     ctx.fillStyle = '#AAEDFF';
35     ctx.fillRect(0, 0, canvas.width, canvas.height);
36    }
37      
38    function update() {
39      requestAnimFrame(update);
40      clearStage();
41      myVisual.draw();
42      myVisual.move();
43    }
44  
45  window.requestAnimFrame = (function(){
46      return  window.requestAnimationFrame   ||
47          window.webkitRequestAnimationFrame ||
48          window.mozRequestAnimationFrame    ||
49          window.oRequestAnimationFrame      ||
50          window.msRequestAnimationFrame     ||
51          function(callback){
52              window.setTimeout(callback, 1000 / 60);
53          };
54  })();
55  
56  update();
57

ボールの動き↓このボールをimage画像にしたいです

javascript
1const canvas = document.getElementById('canvas');
2
3function onResize() {
4    canvas.width = innerWidth * devicePixelRatio;
5    canvas.height = 1200;
6}
7window.addEventListener('resize', onResize);
8onResize();
9
10  var ctx = canvas.getContext('2d');
11
12var Ball = function(x , y , vx) {
13       this.x = x;
14       this.y = y;
15       this.vx = vx;
16      this.draw = function() {
17          ctx.beginPath();
18          ctx.fillStyle = '#FF0088';
19          ctx.arc(this.x, this.y, 30, 0, 2*Math.PI, true);
20          ctx.fill();
21          };
22          this.move = function() {
23          this.x += this.vx;
24          if (this.x > canvas.width + 200 ) {
25              this.x = x;
26          }
27          };
28    }
29      
30   var myBall = new Ball(-100, 100, 5);
31      
32   function clearStage() {
33     ctx.fillStyle = '#AAEDFF';
34     ctx.fillRect(0, 0, canvas.width, canvas.height);
35    }
36      
37    function update() {
38      requestAnimFrame(update);
39      clearStage();
40      myBall.draw();
41      myBall.move();
42    }
43  
44  window.requestAnimFrame = (function(){
45      return  window.requestAnimationFrame   ||
46          window.webkitRequestAnimationFrame ||
47          window.mozRequestAnimationFrame    ||
48          window.oRequestAnimationFrame      ||
49          window.msRequestAnimationFrame     ||
50          function(callback){
51              window.setTimeout(callback, 1000 / 60);
52          };
53  })();
54  
55  update();
56

発生している問題・エラーメッセージ

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2020/04/09 06:51

どこか動作確認ができるサイトにアップできませんか？

shiota-genpachi

2020/04/09 06:54

返信ありがとうございます。恐れ入りますが、未だにローカルサーバーの開発？もできておらず、できません。申し訳ありません。

yambejp

2020/04/09 07:00

正直提示されたサンプルではチカチカ以前に画像が表示されないようなので・・

shiota-genpachi

2020/04/09 07:05

失礼いたしました。質問の仕方があまりよくありませんでした。私の方も、そこで悩んでおります。そこを解決できた先に、チカチカさせずに画像を動かしたいということでした。

shiota-genpachi

2020/04/09 07:08

ただ、質問内容のところにも記載させていただいたのですが、・requestAnimFrameの部分を消すと画像が表示される状態です。しかし、動くことはありません。・setTimeOutを使うと、画像も表示され､動くがチカチカする・requestAnimFrameを使用すると、エラーメッセージは出ないが、画像が表示されなくなるといった状態です。

yambejp

2020/04/09 07:10

あらためて・・・具体的な動作はどうしたいのでしょうか？動かなくてもいいのでなにか手書きの画像で説明できませんか？その動作はcanvasじゃなくsvgでもよいですか？

shiota-genpachi

2020/04/09 07:19

https://www.cow-aka.jp/akabakojoshi/ このサイトの背景の画像のように、画面の端から端へと画像をループさせたいのです。 svgに関しては、現在、一切知識がありませんので、できればcnavasであれば助かります。