javascript – animated canvas shapes with stable shapes They violate the rules of React dependency

I wrote 3 functions for drawing line and rectangle and a function for animated circle. But I can’t render all this together. if i render line and rectangle are working very well, or i render only (animate function) its working. if i render all these functions together there are not working and It gives me errors from inside the functions I wrote, which I am sure are correct. I think the problem is related to writing use layoutEffect dependencies. what can i do for having this all functions together?

import React, { useRef, useLayoutEffect, useEffect, useState, } from 'react'
import rough from "roughjs/bundled/rough.esm";

const Canvas = () => {
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);
  var circleArray = [];
  const [RC, setRC] = useState(null)



  useLayoutEffect(() => {

    const canvas = document.getElementById("Canvas");
    const ctx = canvas.getContext("2d");
    console.log(ctx);
    ctxRef.current = ctx;
    canvasRef.current.width = window.innerWidth - 10;
    canvasRef.current.height = window.innerHeight;
    console.log(ctxRef.current);
    const roughCanvas = rough.canvas(canvasRef.current);
    setRC(roughCanvas)
    animate();
    // rect(roughCanvas); 
    // Line(roughCanvas);
  }, [setRC,animate])
  function animate() {
    requestAnimationFrame(animate);
    ctxRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
    // circle.update();

    for (var i = 0; i < circleArray.length; i++) {
      circleArray[i].update();

    }
    rect(RC);
    Line(RC);

  }
  function rect(roughCanvas) {
    roughCanvas.rectangle(350, 100, 100, 100, { roughness: 2.8, stroke: "#0077b6", fill: "#0077b6" })
    roughCanvas.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green', stroke: 'green' });
    roughCanvas.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple', stroke: 'purple' });
    roughCanvas.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red', stroke: 'red' });
    roughCanvas.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue', stroke: 'blue' });

    roughCanvas.rectangle(100, 300, 100, 100, { roughness: 2.8, stroke: "#57cc99", fill: "#57cc99" })
    roughCanvas.path('M230 70 A 90 40, 5, 10, 5, 120 20 L 125 20 Z', { fill: 'red', stroke: 'red' });
    roughCanvas.rectangle(400, 400, 100, 100, { roughness: 2.8, stroke: "#b392ac", fill: "#b392ac" })
    roughCanvas.rectangle(900, 30, 100, 100, { roughness: 2.8, stroke: "#4ecdc4", fill: "#4ecdc4" })
    roughCanvas.rectangle(1200, 100, 100, 100, { roughness: 2.8, stroke: "#d4d700", fill: "#d4d700" })
    roughCanvas.rectangle(1000, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
    roughCanvas.rectangle(1300, 400, 100, 100, { roughness: 2.8, stroke: "#affc41", fill: "#affc41" })
    roughCanvas.rectangle(650, 125, 100, 100, { roughness: 2.8, stroke: "#b392ac", fill: "#b392ac" })
    roughCanvas.rectangle(600, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
    roughCanvas.rectangle(600, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
    roughCanvas.rectangle(900, 450, 100, 100, { roughness: 2.8, stroke: "#d4d700", fill: "#d4d700" })
    roughCanvas.rectangle(1100, 500, 100, 100, { roughness: 2.8, stroke: "#e76f51", fill: "#e76f51" })
    roughCanvas.rectangle(650, 450, 100, 100, { roughness: 2.8, stroke: "#386641", fill: "#386641" })
    roughCanvas.rectangle(100, 550, 100, 100, { roughness: 2.8, stroke: "#540d6e", fill: "#540d6e" })


  }
  function Line(roughCanvas) {
    roughCanvas.line(80, 120, 300, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(120, 220, 500, 600, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(45, 80, 800, 600, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(300, 100, 45, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(250, 45, 150, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(500, 320, 300, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(590, 460, 20, 400, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(750, 550, 900, 200, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(750, 250, 1000, 20, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(450, 250, 1000, 90, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(450, 600, 1200, 300, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(950, 600, 300, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(400, 300, 600, 450, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1300, 300, 400, 450, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 200, 800, 150, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 300, 800, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 100, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 400, 800, 150, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 500, 800, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 150, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 250, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 550, 800, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
    roughCanvas.line(1500, 550, 800, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
  }
  const arcColor = ["#f07167", "#0077b6", "#57cc99", "#b392ac", "#4ecdc4", "#d4d700", "#ff206e", "#affc41"]




  var count = 0;
  function Circle(x, y, dx, dy, radius, colorcircle) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.colorcircle = colorcircle;
    this.draw = function () {

      ctxRef.current.beginPath();
      ctxRef.current.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      // console.log(count%2===0);
      if (count % 2 === 0) {
        ctxRef.current.fill();
        ctxRef.current.fillStyle = colorcircle;
      }
      else {
        ctxRef.current.strokeStyle = colorcircle;
      }
      count += 1;
      ctxRef.current.stroke();

    }
    // this.update();
    this.update = function () {

      if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0) {
        this.dx = -this.dx;
      }
      if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
        this.dy = -this.dy;
      }
      this.x += this.dx;
      this.y += this.dy;
      this.draw();

    }


  }






  for (var i = 0; i < 70; i++) {
    var radius = 30;
    var dx = (Math.random() - 0.5) * 2;
    var dy = (Math.random() - 0.5) * 2;
    var x = Math.random() * (window.innerWidth - radius * 2) + radius;
    var y = Math.random() * (window.innerHeight - radius * 2) + radius;
    var arcColorcount = Math.floor((Math.random() * 8) + 1);

    var colorcircle = arcColor[arcColorcount];
    circleArray.push(new Circle(x, y, dx, dy, radius, colorcircle))

  }


  // function animate() {
  //   requestAnimationFrame(animate);
  //   ctxRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
  //   // circle.update();

  //   for (var i = 0; i < circleArray.length; i++) {
  //     circleArray[i].update();

  //   }
  //   // Line(RC);
  //   // rect(RC);

  // }
  const width = (window.innerWidth - 30)
  const height = (window.innerHeight)
  return (
    <canvas
      ref={canvasRef}
      id='Canvas'
    // width={(window.innerWidth - 30)}
    // height={window.innerHeight}
    >
    </canvas>
  )
}

export default Canvas

Leave a Comment