Lottie-web: I would like to use an existing canvas.

[machida-yosuke]

I would like to use an existing canvas.

pug File

block content-block
  main
    .top
      canvas#top_anime

js File

const w = $('.top').width();
const h = $('.top').height();
$('#top_anime').attr('width', w);
$('#top_anime').attr('height', h);

bodymovin.loadAnimation({
    container: document.getElementById("top_anime"),
    renderer: "canvas",
    loop: false,
    autoplay: true,
    rendererSettings: {
        context: ('2d'),
        scaleMode: 'noScale',
        clearCanvas: true
    },
    path: '../bodymovin_anime/top.json'
});

After compiling
html

<main>
        <div class="top">
          <canvas id="top_anime">
            <canvas width="1500" height="1700" style="width: 100%; height: 100%; transform-origin: 0px 0px 0px;"></canvas>
          </canvas>

Please tell me how to solve it.

[bodymovin]

you need to get the canvas context
try something like:
```js var cvs = container: document.getElementById("top_anime"); var ctx = cvs.getContext('2d'); bodymovin.loadAnimation({ renderer: "canvas", loop: false, autoplay: true, rendererSettings: { context: ctx, scaleMode: 'noScale', clearCanvas: true }, path: '../bodymovin_anime/top.json' });

[machida-yosuke]

Thank you for your continued support!!