Холст не добавится правильно

Question

С текущим кодом холст добавляется в конец страницы. Я пытаюсь переместить холст с идентификатором «can» из нижней части моей страницы в div с идентификатором «saletop».

Я пытался использовать appendChild и добавлять непосредственно из моей функции sale_canvas, но этоне показывается.

functions.js

function sale_canvas() {

?>
    <script type="text/javascript">

        jQuery(document).ready(function( $ ) {              

                const width = 750;
                const height = 50;
                const centerY = height / 2;
                const amplitude = 0 ;
                const speed = 50;
                const degrees = 45;

                let startTime = 0;
                let previousTime = 0;
                let pausedTime = 0;
                let paused = false;
                let canvas, ctx;
                let charObjs;

                const start = () => {
                  canvas = document.createElement('canvas');            
                  canvas.width = width;
                  canvas.height = height;
                  canvas.id = 'can';
                  ctx = canvas.getContext('2d');

                  document.body.appendChild(canvas);
                  window.addEventListener('blur', () => {
                    if (!paused) {
                      paused = true;
                      pausedTime = Date.now() - startTime;
                    } 
                  });

             ** the rest of the code **

                };

                start();            

        });

    </script>
<?php

}
add_action('wp_head', 'sale_canvas');

function sale_replace() {

?>
    <script type="text/javascript">

        jQuery(document).ready(function( $ ) {              
            $("#can").appendTo("#saletop");
        });

    </script>
<?php

}
add_action('wp_head', 'sale_replace');

page.php

<div class="salebanenr">
 <div class="row">          
  <div class="col-12 col-md-12" id="saletop">

  </div>                    
 </div>
</div>

Холстдобавляется, но пусто, без содержимого.

ПОЛНЫЙ КОД ЗДЕСЬ: https://pastebin.com/gm2GMTcK

Answer 1

Не вижу, в чем проблема - сделал тест, и он работает просто отлично. обратите внимание, что вы можете добавить холст непосредственно в div. нет, сначала добавьте его в тело.

Но ваш код работает должным образом: jsfiddle demo

jQuery(document).ready(function($) {

  const width = 750;
  const height = 50;
  const centerY = height / 2;
  const amplitude = 0;
  const speed = 50;
  const degrees = 45;

  let startTime = 0;
  let previousTime = 0;
  let pausedTime = 0;
  let paused = false;
  let canvas, ctx;
  let charObjs;

  const start = () => {
    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.id = 'can';
    ctx = canvas.getContext('2d');

    document.body.appendChild(canvas);
    window.addEventListener('blur', () => {
      if (!paused) {
        paused = true;
        pausedTime = Date.now() - startTime;
      }
    });
    window.addEventListener('focus', () => {
      if (paused) {
        paused = false;
        startTime = Date.now() - pausedTime;
        animate();
      }
    });

    charObjs = initScrollText('SALE SALE SALE SALE SALE SALE SALE SALE');

    startTime = Date.now();
    previousTime = getTime();
    animate();
  };

  const initScrollText = (text) => {
    ctx.font = 'bold 32px Courier New';

    let position = 0;

    return text.split('').map((char) => {
      const width = ctx.measureText(char).width;
      const charObj = {
        char,
        width,
        position
      };

      position += width;
      return charObj;
    });
  };

  const getTime = () => {
    return paused ?
      pausedTime :
      Date.now() - startTime;
  };

  const scrollText = (dt) => {
    ctx.fillStyle = 'white';

    charObjs.forEach((charObj) => {
      charObj.position += dt * speed;

      if (charObj.position > width) {
        charObj.position = -charObj.width;
      }

      const y = Math.sin(charObj.position / degrees) * amplitude;

      ctx.fillText(charObj.char, charObj.position, centerY + y);
    });
  };

  const animate = () => {
    const now = getTime();
    const dt = (now - previousTime) * 0.001 // delta time in seconds.
    previousTime = now;

    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, width, height);

    scrollText(dt);

    if (!paused) {
      requestAnimationFrame(animate);
    }
  };

  start();

});




jQuery(document).ready(function($) {
  $("#can").appendTo("#saletop");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="salebanenr">
  <div class="row">
    <div class="col-12 col-md-12" id="saletop" style="border:1px solid black">
      test
    </div>
  </div>
</div>