0

I'm trying to use sine-waves package sine-waves package , in react app, first thing I did is looking for examples, border wave particularly and start to convert it to react component and when I tried to start the app, it gives me this error : enter image description here is there a problem in canvas with react any help will be appreciated ...
this is my attempt:

import React from 'react';
import SineWaves from 'sine-waves';
import _ from 'lodash';

class SineWave extends React.Component {
  width = 300;

  height = 300;

  amplitude = 20;

  speed = 1;

  ease = 'SineInOut';

  waves = [
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: this.amplitude,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Sawtooth',
    },
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: -this.amplitude / 2,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Sawtooth',
    },
    {
      timeModifer: 2,
      lineWidth: 1,
      amplitude: -this.amplitude,
      wavelength: 100,
      segmentLength: 1,
      strokeStyle: 'rgba(255, 255, 255, 0.3333)',
      type: 'Square',
    },
  ];

  render() {
    const { speed, width, height, ease, waves } = this;
    const bottomWaves = new SineWaves({
      el: document.getElementById('bottom-waves'),

      speed,
      width,
      height,
      ease,
      waves: _.clone(waves, true),
      rotate: 0,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const topWaves = new SineWaves({
      el: document.getElementById('top-waves'),

      speed: -speed,
      width,
      height,
      ease,
      waves: _.clone(waves, true),
      rotate: 0,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const leftWaves = new SineWaves({
      el: document.getElementById('left-waves'),

      speed,
      width: height,
      height: width,
      ease,
      waves: _.clone(waves, true),
      rotate: 90,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    const rightWaves = new SineWaves({
      el: document.getElementById('right-waves'),

      speed: -speed,
      width: height,
      height: width,
      ease,
      waves: _.clone(waves, true),
      rotate: 90,
      resizeEvent() {
        let gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

        let index = -1;
        let { length } = this.waves;
        while (++index < length) {
          this.waves[index].strokeStyle = gradient;
        }

        // Clean Up
        index = void 0;
        length = void 0;
        gradient = void 0;
      },
    });

    return (
      <>
        <h1 id="title">
          <a href="https://github.com/isuttell/sine-waves">SineWaves.js</a>
        </h1>
        <h2 id="sub-title">Border Example</h2>
        <div id="box">
          <h2 id="example-title">Animated Borders</h2>
          <canvas className="wave" id="top-waves" />
          <canvas className="wave" id="left-waves" />
          <canvas className="wave" id="bottom-waves" />
          <canvas className="wave" id="right-waves" />
        </div>
      </>
    );
  }
}

export default SineWave;
fadi omar
  • 740
  • 5
  • 15

1 Answers1

0

Generally speaking a message like uncaught : No Canvas Selected would either mean you didn't specify a canvas target at all or it simply can't find it because it doesn't exist.

Looking at the parameters you're passing to the constructor of SineWaves

   const rightWaves = new SineWaves({
      el: document.getElementById('right-waves'),

you're telling it to look for a <canvas> element with the id right-waves.

Try setting one up like:

<canvas id="right-waves"></canvas>
obscure
  • 11,916
  • 2
  • 17
  • 36
  • should I but this in `componentDidMount` then ? because you can see In the render method it returns 4 canvas elements – fadi omar Aug 06 '20 at 22:49
  • thanks for replay this was the issue I was calling `getElementById` in render method before the dom has loaded. – fadi omar Aug 06 '20 at 22:56
  • Great fadi! I just realized you've returned the required canvas elements correctly - of course this means those aren't accessible using getElementById immediately. – obscure Aug 06 '20 at 22:58