Pixel density should be passed to <ShaderGradientCanvas> instead of <ShaderGradient>

[jackycymo]

Currently copying the React component example while tweaking the pixel density doesn't work because pixelDensity should be passed to the canvas instead

import React from 'react'
import { ShaderGradientCanvas, ShaderGradient } from '@shadergradient/react'
import * as reactSpring from '@react-spring/three'

function App() {
  return (
    <ShaderGradientCanvas
      style={{
        position: 'absolute',
        top: 0,
      }}
      pixelDensity={2.8} <--- should be passed here
    >
      <ShaderGradient
        control='query'
        urlString='https://www.shadergradient.co/customize?animate=on&axesHelper=off&bgColor1=%23000000&bgColor2=%23000000&brightness=1.2&cAzimuthAngle=180&cDistance=3.6&cPolarAngle=90&cameraZoom=1&color1=%2352ff89&color2=%23dbba95&color3=%23d0bce1&embedMode=off&envPreset=city&fov=45&gizmoHelper=hide&grain=on&lightType=3d&pixelDensity=1&positionX=-1.4&positionY=0&positionZ=0&reflection=0.1&rotationX=0&rotationY=10&rotationZ=0&shader=defaults&type=plane&uDensity=1.3&uFrequency=5.5&uSpeed=0.4&uStrength=4&uTime=0&wireframe=false&zoomOut=false'
      />
    </ShaderGradientCanvas>
  )
}

[ruucm]

Could you share a codesandbox that has the same problem?

We are passing the pixelDensity prop to r3f Canvas

https://github.com/ruucm/shadergradient/blob/main/packages/shadergradient-v2/src/ShaderGradientCanvas.tsx