How to make canvas animation in StencilJS?

Question

I'm programming a website with stencilJS and i want to include a canvas animation. But it says that the width, high is null, so it couldnt read this. Why is this not working? I tried to put the script-tag before the canvas-tag.

I tried almost everything. And I can't find similar problems on the Internet. The Problem is that the console says that it can't set property 'width' with inner null. But Why?

Here is my code:

tsx:

render() {
return (
    <div>
              <canvas id="x"></canvas>
        <button onClick={this.animation}>nfjefjefhewjfhe</button>
    </div>
    );
  }

  animation(){
    var canvas = document.getElementById("x") as HTMLCanvasElement;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // // var bounce : number = 0.7;
    // var gravity : number = 1;
    var c = canvas.getContext('2d') as CanvasRenderingContext2D;
    // var d = canvas.getContext('2d') as CanvasRenderingContext2D;
    // var e = canvas.getContext('2d') as CanvasRenderingContext2D;

    // //first circle
    var yC : number = 200;
    var dyC : number = 2;
    var radiusC : number = 20;
    var seconds : number = 0;

    //second one
    // var xD : number = 200
    // var yD : number = 300;
    // var dyD : number = 1.5;
    // var dxD : number = 2;
    // var radiusD : number = 70;

    //third one
    // var xE : number = 500
    // var yE : number = 300;
    // var dyE : number = 1.5;
    // var dxE : number = -2;
    // var radiusE : number = 70;

    // function draw(){
    //     //first circle
         c.beginPath();
         c.arc(100, yC, radiusC, 0, Math.PI * 2, false);
         c.fillStyle = "#BBD6FF";
         c.fill();

        //second circle
        // d.beginPath();
        // d.arc(xD, yD, radiusD, 0, Math.PI * 2, false);
        // d.fillStyle = "#515151";
        // d.fill();

        // //third circle
        // e.beginPath();
        // e.arc(100, yE, radiusE, 0, Math.PI * 2, false);
        // e.fillStyle = "#00398D";
        // e.fill();
    //}

    // function createAnimation(){
    //     requestAnimationFrame(createAnimation);
    //     //creating circles
    //     draw();
    //     //first circle
    //     if (yC + radiusC + dyC > canvas.height)
    //     {
    //         dyC = -dyC;
    //     }
    //     else{
    //         dyC += gravity;
    //     }

    //     yC += dyC;

        //second circle
        // if (yD + radiusD + dyD > canvas.height)
        // {
        //     dyD = -dyD;
        //     dyD *= 10;
        // }

        // if (xD + radiusD + dxD > canvas.width)
        // {
        //     dxD = -dxD;
        // }
        // yD += dyD;
        // xD += dxD;

        // //third circle
        // if (yE + radiusE + dyE > canvas.height)
        // {
        //     dyE = -dyE;
        //     dyE *= 10;
        // }

        // if (xE + radiusE + dxE > canvas.width)
        // {
        //     dxE = -dxE;
        // }
        // yE += dyE;
        // xE += dxE;

        //  } 
        // createAnimation();
        // console.log(Event);
    }`

css for the tsx:

`/* 
#x{
  border: 1px solid black;
  height: 1000px;
  width: 1000px
} */

body{
  margin: 0;
  height: 1000px;
  width: 1000px;
}
`

The HTML I want to include my component:
`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./home.css">
    <script src="../dist/shopsite.js"></script>
    <title>Document</title>
</head>
<body>
    <div class='rahmen'>
      <ladebildschirm-nicole></ladebildschirm-nicole>
      </div>  
    </div`
</body>
</html>`

I don't understand what you mean by "the console says that it can't set property 'width' with inner null". What is the exact error? — Thomas, May 07 '20 at 16:25

score 0 · Answer 1 · answered May 05 '20 at 15:54

The problem is that you're not setting the size correctly. You're using the comparison operator (==) instead of an assignment (=).

Change this:

canvas.width == window.innerWidth;
canvas.height == window.innerHeight;

to this:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

How to make canvas animation in StencilJS?

1 Answers1