const CVS = new Canvas(document.getElementById("canvasId"))

    // Create a canvas object
    const dummyShape = new Shape([50, 50], [new Dot()])
    
    // Add it to the canvas
    CVS.add(dummyShape)

    // Set up the prebuilt event listeners, allowing the creation of more interactive effects!
    CVS.setMouseMove(/*custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()

    // Start
    CVS.startLoop()

    const CVS = new Canvas(document.getElementById("canvasId"))
    
    // Creating and adding shapes ...
    const dummyShape = new Shape([50, 50], [new Dot()])
    CVS.add(dummyShape)
    
    CVS.setMouseMove(/*custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()
    
    CVS.startLoop()

    // For a source object
    CVS.add(yourShape)

    
    // For a prefab or inactive shape
    CVS.add(yourShape, true)

    // Set the important mouse events 
    CVS.setMouseMove(/*possible custom callback*/)
    CVS.setMouseLeave()
    CVS.setMouseDown()
    CVS.setMouseUp()

    // Set the important keyboard events 
    CVS.setKeyDown(/*possible custom callback*/)
    CVS.setKeyUp()

    // Starts the main loop
    CVS.startLoop() 

    // Stops the main loop
    CVS.stopLoop()

    // Creating a FPSCounter instance
    const fpsCounter = new CDEUtils.FPSCounter()
    
    const CVS = new Canvas(
        document.getElementById("canvas"),  // The HTML canvas element to link to
        ()=>{                               // Custom callback that runs every frame
            // Get current fps
            const fps = fpsCounter.getFps()
        
            // Display fps in another element
            document.getElementById("fpsDisplay").textContent = fps
        }
    )

   /**
     * Used to make an object follow a custom path
     * @param {Number} duration: duration of the animation in ms
     * @param {Function} easing: easing function 
     * @param {Function?} action: a custom callback that can be called in addition to the movement                                                        //newProg is 'prog' - the progress delimiter of the range
     * @param {[[Number, Function], ...]} progressSeparations: list of callback paired with a progress range, the callback must return a position (prog, newProg, initX, initY)=>return [x,y]
     * progressSeparations example: [0:(prog)=>[x1, y1]], [0.5:(prog, newProg)=>[x2, y2]] -> from 0% to 49% the pos from 1st callback is applied, from 50%-100% the pos from 2nd callback is applied  
     */
     
    // Example use, for 3 seconds, easeOutQuad, no custom callback, will travel in a sideways 'L' shape 
    let dx=400, dy=200
    dot.follow(3000, Anim.easeOutQuad, null, [[0,(prog)=>[dx*prog, 0]], [0.5,(prog, newProg)=>[dx*0.5, dy*newProg]]])

    // Adding a connection with another dot
    dot.addConnection(otherDot)

    // Removing a connection
    dot.removeConnection(otherDot)

    // By default, path caching for dots is enabled.
    // But for very dynamic dots (changes every frame), sometimes it might be better to disable caching.

    // To disable path caching:
    const dynamicDot = new Dot(null, null, null, null, null, null, true) // disables the path caching via constructor
    existingDynamicDot.disablePathCaching() // disables the path caching via this function if the dot already exists

    // To enable path caching back use:
    existingDynamicDot.updateCachedPath() 

    // Removes the dot completely
    dot.remove()

    // Creating a lonely dot
    const aloneDot = new Dot(
        [0,0],          // positioned at [0,0]
        25,             // 25px radius
        [0,0,255,0.5],  // blue at 50% opacity
        ()=>{           // setupCB, custom callback ran on dot's initialization
            console.log("I am now added to the canvas and ready to go!")
        }
    )
    
    // Add the dot as a standalone object (definition)
    CVS.add(aloneDot)

    // Creating a Shape containing some dots!
    const squareLikeFormation = new Shape([0,0], [
            new Dot([100, 100]), // Dots contained in a shape will take on some properties (color, radius, limit, ...) of the shape.
            new Dot([150, 100]),
            new Dot([150, 150]),
            new Dot([100, 150])
    ], _Obj.DEFAULT_RADIUS, Color.DEFAULT_COLOR, Shape.DEFAULT_LIMIT)
    
    // Add the shape along with all of its dots as a single unit. (reference)
    CVS.add(squareLikeFormation)

    // Creating and adding a new empty Shape to the canvas
    const dummyShape = new Shape([100,100])
    CVS.add(dummyShape)
    
    // Later, adding a dot to the shape, at [150, 150] on the canvas
    dummyShape.add(new Dot(50, 50))
    
    // or many dots
    dummyShape.add([new Dot(50, 50), new Dot(50, 100)])

    // Sets the radius of all dummyShape's dots to 10
    dummyShape.setRadius(10)
    
    // Sets the color of all dummyShape's dots to red
    dummyShape.setColor("red")
    
    // Sets the limit of all dummyShape's dots to 100
    dummyShape.setLimit(100)
    
    
    // Disables the path caching of all dummyShape's dots
    dummyShape.disableDotsPathCaching()
    
    // Enables the path caching of all dummyShape's dots
    dummyShape.enableDotsPathCaching()

    // Generating a sine wave-based formation
    const generatedDots = Shape.generate(
        x=>Math.sin(x/50)*100, // make the y follow a sine wave pattern
        [-50, 0],           // the generation start is offset by -50 horizontally
        1000,               // the generation will span 1000 px in length
        10,                   // the generation is sectioned in 10px intervals
        [5, -5],            // a range allowing random Y between the [min, max]
        (dot, nextDot)=>{
            dot.addConnection(nextDot) // adding a connection between each dot
        }
    )

    // Creating a new shape containing the generated dots
    const dummyShape = new Shape([0, 0], generatedDots)

    // Adding the shape to the canvas
    CVS.add(dummyShape)

    // This will rotate all of dummyShape's dots around the shape's pos by 45 degrees
    dummyShape.rotateBy(45)
    
    // This will rotate all of dummyShape's dots around the pos [100, 100] at 180 degrees
    dummyShape.rotateAt(180, [100, 100])
    
    // This will smoothly rotate all of dummyShape's dots around the shape's pos at 125 degrees, over 5 seconds
    dummyShape.rotateTo(125, 5000)

    // This will scale the distance between all of dummyShape's dots by 2x horizontally, from the point [250, 100] 
    dummyShape.scaleBy([2, 1], [250, 100])
    
    // This will scale the distance between all of dummyShape's dots to 4x, from the shape's pos
    dummyShape.scaleAt([4, 4])
    
    // This will smoothly scale the distance between all of dummyShape's dots to 2.5x horizontally and 
    // 3.5x vertically, from the shape's pos, over 3 seconds
    dummyShape.scaleTo([2.5, 3.5], 3000)

    // This will remove the dot with the id 10
    dummyShape.removeDot(10)
    
    // This will remove the first dot of the shape
    dummyShape.removeDot(dummyShape.dots[0])
    
    // This will remove the entire shape, along with its dots!
    dummyShape.remove()

    // Creating a dummy shape
    const dummyShape = new Shape([10,10], new Dot())
    
    // Adding it to the canvas and thus initializing it
    CVS.add(dummyShape)
    
    
    // Creating a copy of the dummyShape (which needs to be initialized)
    const dummyShapeCopy = dummyShape.duplicate()
    
    // Adding it to the canvas
    CVS.add(dummyShapeCopy)
    
    // Moving the copy 100px to the right
    dummyShapeCopy.moveBy([100, 0])
    

    // Creating a simple square-like shape
    const simpleShape = new Shape([100,100],[
         new Dot([-50, -50]),
         new Dot([-50, 0]),
         new Dot([-50, 50]),
         new Dot([0, -50]),
         new Dot([0, 50]),
         new Dot([50, -50]),
         new Dot([50, 0]),
         new Dot([50, 50]),
     ], null, normalColorTester, 100, (render, dot, ratio, setupResults, mouse)=>{
     
         // Changes the opacity and color according to mouse distance
         dot.a = CDEUtils.mod(1, ratio, 0.8)
         dot.r = CDEUtils.mod(255, ratio, -255)
         dot.g = CDEUtils.mod(255, ratio, -255)
         
         
         // Changes the dot's radius, from 2 times the default radius with a range of 80% (10px..2px), according to mouse distance
         dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS*2, ratio, _Obj.DEFAULT_RADIUS*2*0.8)
         
         // Draws a ring around the dot, at 5 times the radius
         CanvasUtils.drawOuterRing(dot, [255,255,255,0.2], 5)
     })

    // Adding it to the canvas
    CVS.add(simpleShape)

    const draggableDotShape = new Shape([0,0], new Dot([10,10]), null, null, null, (render, dot, ratio, setupResults, mouse, dist, shape)=>{
        
        // Checking if the mouse is over the dot and clicked, and changing the color according to the state
        const mouseOn = dot.isWithin(mouse.pos, true)
        if (mouseOn && mouse.clicked) dot.color = [255, 0, 0, 1]
        else if (mouseOn) dot.color = [0, 255, 0, 1]
        else dot.color = [255, 255, 255, 1]
    
        // Draws a ring around the dot, at 3 times the radius, only visible if the mouse is near
        CanvasUtils.drawOuterRing(dot, [255,255,255,CDEUtils.mod(0.3, ratio)], 3)
    
        // Making the dot drawable
        const dragAnim = setupResults
        dragAnim(shape.firstDot, mouse, dist, ratio)
        
    }, null, (shape)=>{

        // Accessing the dot
        const dot = shape.firstDot
        
        // Adding an infinite anim that changes the radius size back and forth
        dot.playAnim(new Anim((progress, i)=>{
            dot.radius = i%2?25*(1-prog):25*prog
        }, -750, Anim.easeOutQuad))

        // Getting the dragging animation callback
        const dragAnim = CanvasUtils.getDraggableDotCB()

        // Making it available in the drawEffectCB as setupResults
        return dragAnim
    })
    
    // Adding it to the canvas
    CVS.add(draggableDotShape)

    // Assuming we have simpleShape from example use 1 available...

    // Creating a shape with a dot moving back and forth every second
    const backAndForthDotShape = new Shape([200,200], new Dot([0,0], null, null, (dot, shape)=>{
            let distance = 150, ix = dot.x
            dot.playAnim(new Anim((progress, playCount, deltaTime)=>{
                dot.x = ix + ((playCount % 2) == 0 ? 1 : -1) * distance * progress
                if (progress == 1) ix = dot.x
            }, -1000, Anim.easeOutBack))
        })
    )
    
    
    // Setting simpleShape's anchorPos to the dot of backAndForthDotShape. (Using a callback since the dot doesn't exist yet)
    simpleShape.anchorPos = () => backAndForthDotShape.firstDot
    
    
    // Adding the shape to the canvas
    CVS.add(backAndForthDotShape)

    // ... Assuming there is a dummyFilledShape existing somewhere

    // Moving it somewhere else
    dummyFilledShape.moveAt(250, 250)

    // If the dynamicUpdates parameter isn't set to 'true', the fill area will ONLY update IF the updatePath() function is called
    dummyFilledShape.updatePath()

  // Creating a simple filledShape
    const myFilledShape = new FilledShape(
        "red", // color of the fill area
        true,  // Automatically updates the fill area positions
        [100, 100], // shape pos
        [
            new Dot([-50, -50]), // Top left corner
            new Dot([50, -50]),  // Top right corner
            new Dot([50, 50]),   // Bottom right corner
            new Dot([-50, 50])   // Bottom left corner
        ]
    )

    // Adding it to the canvas
    CVS.add(myFilledShape)

    // Creating a Grid
    const coolAlphabet = new Grid(
        "abcdefg\nhijklm\nnopqrs\ntuvwxyz", // the keys corresponding to the alphabet letters, with some line breaks
        [5, 5],                             // equal gaps, this will make the alphabet look a bit square-ish
        50,                                 // 50px letter spacing
        GridAssets.DEFAULT_SOURCE,          // default source
        [10,10],                            // the shape position (The text will start from this point, as its top-left corner)
        2,                                  // 2px dot radius
        null,                               // color is left undefined, the shape will assign it the default value
        null,                               // limit is left defined, default value assigned (100)
        (render, dot, ratio)=>{                // This is the drawEffectCB, which gets call for every dot of the shape, every frame
        
            // This will make a nice proximity effect when the mouse is close.
            // The mod() function and the ratio allow us to modify the dot radius with
            // a linear interpolation based on the distance between the ratioPos (the mouse) and the current dot.
            dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS, ratio, _Obj.DEFAULT_RADIUS)     // DEFAULT_RADIUS = 5
            
            
            // By default, no connections are drawn between the dots of a grid.
            // We can use the drawDotConnections() function to draw them easily.
            CanvasUtils.drawDotConnections(dot, [255,0,0,1])
        }
    )
    

    // The grid is done and dusted, adding it to the canvas
    CVS.add(coolAlphabet)

// Creating a grid with symbols that distort themselves on mouse hover
const distortedGrid = new Grid(
    "abc\n123\n%?&", // symbols used
    [7, 7],     // gaps of 7px between each dot
    50,         // spacing of 50px between symbols
    null,       // using the default source
    [100, 100], // pos
    2,          // dot's radius
    "aliceblue",// dot's color 
    50,         // limit of 50px
    (render, dot, ratio, filterId)=>{ // grid's drawEffectCB

        const scaleValue = CDEUtils.mod(50, ratio), // the scale value adjusted by the distance of the mouse
              hasFilter = scaleValue>>0, // whether the current dot is affected by the filter (IMPORTANT FOR PERFORMANCES)
              filterValue = hasFilter ? "url(#"+filterId+")" : "none" // adjusting the filter value

        // accessing the <feDisplacementMap> element of the filter and updating its scale attribute
        Canvas.getSVGFilter(filterId)[1].setAttribute("scale", scaleValue)

        // drawing the symbols and applying some simple style changes, as well as the (↓) distortion filter. /!\ Also setting the (↓) "forceBatching" parameter to whether the filter is active or not
        CanvasUtils.drawDotConnections(dot, render.profile5.update([255,0,0,1], filterValue, null, 1, 3), null, null, null, !hasFilter)

        // finishing with a simple opacity effect for the dots
        dot.a = CDEUtils.mod(1, ratio)

}, null, ()=>{ // grid's setupCB

    // filter id to be used for the filter url
    const filterId = "myFilter"

    // loading a simple custom distortion SVG filter
    Canvas.loadSVGFilter(`<svg>
        <filter id="turbulence">
          <feTurbulence type="turbulence" baseFrequency="0.01 0.02" numOctaves="1" result="NOISE"></feTurbulence>
          <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="25">
          </feDisplacementMap>
        </filter>
       </svg>`, filterId)
    
    return filterId
})

// Adding the grid to the canvas
CVS.add(distortedGrid)

{
    width:5,
    height:5,
    
    A: [
        [2,D.bl+D.br],
        [1,D.bl],[3,D.br],
        [0,D.r+D.b],[1,D.r],[2,D.r],[3,D.r],[4,D.b],
        [0,D.b],[4,D.b],
        [0],[4]
    ],
    
    // Other symbols ...
}

const helloWorldText = new TextDisplay(
    "Hello World!", // Displayed text
    [200, 100],     // positioned at [200, 100]
    "lightblue",    // colored light blue
    (render)=>render.textProfile1.update("italic 24px monospace"), // using the textProfile1 styles, only over writing the font
    null, // leaving drawMethod to the default value ("FILL")
    null, // leaving maxWidth to the default value (undefined)
    (textDisplay)=>{// setupCB
    
        // adding a spin animation, repeating every 3 seconds
        textDisplay.playAnim(new Anim(prog=>{
            // Updating the horizontal scale to go from 1, to -1, back to 1
            textDisplay.scale = [Math.sin(Math.PI*prog*2), 1]
        },-3000))
        
    })

// Adding the object to the canvas.
CVS.add(helloWorldText)

// Creating an ImageDisplay with a url pointing to an image
const myCoolImage = new ImageDisplay("https://static.wikia.nocookie.net/ftgd/images/9/97/ExtremeDemon.png/revision/latest?cb=20240801164829")

// Adding the object to the canvas.
CVS.add(myCoolImage)

// Creating an ImageDisplay by loading a local file, and adjusting the sizes
const myCoolImage = new ImageDisplay(
    "./img/logo.png", // local file located at [currentFolder]/img/logo.png
    [0,0],            // position of the top-left corner
    [100, 100]        // rezises the image to 100x100
)

// Cropping the source image to use only from [20, 20] to [150, 150]
myCoolImage.sourceCroppingPositions = [[20,20], [150, 150]]

// Adding the object to the canvas.
CVS.add(myCoolImage)

// Creating an ImageDisplay playing a video
const dummyVideo = new ImageDisplay(
    "./img/vidTest.mp4", // local file located at [currentFolder]/img/vidTest.mp4
    null, // using default pos ([0, 0])
    null, // using natural size (default)
    (video)=>{
        // SetupCB, runs when the source is loaded

        // Automatically starts the video once loaded
        video.playVideo()
    }
)

// Adding the object to the canvas.
CVS.add(dummyVideo)

// Creating an ImageDisplay displaying the camera (requires user permission)
const cameraFeed = new ImageDisplay(
    ImageDisplay.loadCamera(), // get the camera, with default settings
    [0,0], // draw at origin
    ImageDisplay.RESOLUTIONS.SD // shrink it down to 640x480
)

// Creating an ImageDisplay displaying a screen (requires user actions and permission)
const screenFeed = new ImageDisplay(
    ImageDisplay.loadCapture(), // get the screen capture, with default settings
    [640,0], // draw next to the camera display
    [1920/4, 1080/4] // resize it to Full HD divided by 4
)

// Adding both objects to the canvas.
CVS.add(cameraFeed)
CVS.add(screenFeed)

// Creating an AudioDisplay playing and displaying a local file
const audioDisplay = new AudioDisplay(
    "./audio/song.mp3", // the filepath of the .mp3 file
    [100,100],          // the pos of the display
    "lime",             // color of the display
    AudioDisplay.BARS(),// the display type (here we use the generic bars/waveform display)
    64,    // the sample count, here 64 bars will be displayed (and the fftSize will be 128)
    false, // not disabling the audio so we can hear the song.mp3 playing
    0,     // no offset
    (type, e)=>console.log("Dang it, error! Type:", type, " | ", e) // onerror callback
)

// Adding the object to the canvas.
CVS.add(audioDisplay)

// Creating an AudioDisplay displaying the microphone
const micDisplay = new AudioDisplay(
    AudioDisplay.loadMicrophone(), // loading the microphone
    [100,100],          // the pos of the display
    "lime",             // color of the display
    (render, bin, pos, audioDisplay, accumulator, i)=>{// binCB
        const maxRadius = 500/AudioDisplay.MAX_NORMALISED_DATA_VALUE, // defining a max radius of 500px
              precision = 100 // used to skip over some bins (the lowest this is, the more precise the display will be, but the more performance-heavy it will be too!)
        
        // optimizing with the precision variable (only drawing every <precision> time)
        if (i%precision==0) {

            // drawing the circles, the radius is based on the current bin value, and it's style is based on this audioDisplay object's styles
            render.batchStroke(Render.getArc(pos, maxRadius*bin), audioDisplay._color, audioDisplay.visualEffects)
        }
    },
    2000,   // the sample count, here a maximum of 2000 bins would be displayed (and the fftSize will be 4096)
    true,  // disabling the audio to prevent echo
)

// Adding the object to the canvas.
CVS.add(micDisplay)

// Loading and displaying the screen audio. For this, the user needs to select a valid tab/window/screen.
const audioDisplay = new AudioDisplay(AudioDisplay.loadScreenAudio(), [100,100], "lime", AudioDisplay.BARS(), 64)

// Applying some audio modifiers:

// Setting the volume to 200%
audioDisplay.setVolume(2)

// Sets the audio filter to keep low frequencies and cut high ones
audioDisplay.setBiquadFilterType(AudioDisplay.BIQUAD_FILTER_TYPES.LOWPASS)

// delays the audio by 1 second
audioDisplay.setDelay(1)

// sets the distortion level to 10
audioDisplay.setDistortionCurve(10)

// sets the origin of the audio to seem like it's coming from 1 meter to the left
audioDisplay.setOriginPos(-1)

// since this sounds pretty bad, you could also reset all the modifiers with this:
//audioDisplay.resetAudioModifiers()

// Adding the object to the canvas.
CVS.add(audioDisplay)

// Taking back the audioDisplay from example 1.
const audioDisplay = new AudioDisplay("./audio/song.mp3", [100,100], "lime", AudioDisplay.BARS(), 64)

// For this to work, you need an impulse response file

// This will load the IR and, by default, assign its buffer to the convolverNode then connect the latter. (You also can handle this yourself by specifying the second parameter: "readyCallback")
audioDisplay.loadImpulseResponse("./audio/IR.wav")

// To disable this effect, disconnect the convolverNode:
// audioDisplay.disconnectConvolver()

// Adding the object to the canvas.
CVS.add(audioDisplay)

    const red = "red"
    
    console.log("Here is red in some other formats:",
        Color.convertTo(Color.FORMATS.RGBA, red)
        Color.convertTo(Color.FORMATS.HSV, red)
        Color.convertTo(Color.FORMATS.HEX, red)
    )

    const redColor = new Color([255, 0, 0, 1])
    
    
    const whereRedIsAt = Color.findFirstPos(
        CVS, // Canvas instance
        redColor // Color instance
    )
    
    
    if (whereRedIsAt) console.log("The color red was found at: X:"+whereRedIsAt[0]+", Y:"+whereRedIsAt[1])
    else console.log("The canvas doesn't contain the color red")

    // Creating a gradient
    const customGradient = new Gradient(
            CVS.ctx,                   // canvas context
            [ [0, 0], [100, 100] ],    // setting manual position
            [[0, "red"], [1, "blue"]], // goes from red to blue
            Gradient.TYPES.LINEAR      // linear gradient
        )

    // Assigning the gradient to a dummy filled shape
    dummyFilledShape.fillColor = customGradient

    // Ex: Updating color stops
    customGradient.colorStops = [[0, "green"], [1, "pink"]]

    // Access the gradient assigned to the shape's filling and update it
    dummyFilledShape.fillColorRaw.update()

const gradientShape = new FilledShape(
        // Creating and returning a linear gradient with a callback.
        // This linear gradient will auto-position itself according to the shape's dots, start at 90deg rotation, and will go from purple->red->yellow-ish
        (render, shape)=>new Gradient(render, shape, [[0, "purple"], [0.5, [255,0,0,1]], [1, "#ABC123"]], null, 90), 
        
        // Other parameters are used by the FilledShape, to make a square at [100, 100]
        false,
        [200, 200], 
        [
            new Dot([-50, -50]), // Top left corner
            new Dot([50, -50]),  // Top right corner
            new Dot([50, 50]),   // Bottom right corner
            new Dot([-50, 50])   // Bottom left corner
        ]
    )
    
    // Creating and playing the rotating gradient animation
    gradientShape.playAnim(
        new Anim((progress)=>{
        
            // Getting the gradient instance
            const gradient = gradientShape.fillColorRaw
            
            // Rotating it
            gradient.rotation = 360 * progress
            
        }, -750) // repeating every 750 ms
    )

    // Adding it to the canvas
    CVS.add(gradientShape)

    // Creating a dummy shape
    const dummyShape = new Shape([0, 0], [new Dot([50,50]), new Dot([100, 0])])


    // Adding the shape to the canvas first, because it needs to be initialized before looking at its pos
    CVS.add(dummyShape)

    // Getting the area (see example use 4 for real use of this function)
    const area = _DynamicColor.getAutomaticPositions(dummyShape)
    console.log("My Dummy Shape fits perfectly into this area! -> ", area)

    // Creating a dummy shape with two big dots, here parts of the image are going to be visible through the dots
    const dummyShape = new Shape([100, 100], [new Dot([250,250]), new Dot([0,0])], 50, (render, shape)=>
        new Pattern(
            render, // the render instance
            "./img/img2.jpg", // the source of the image, here it's the path to a local file
            shape, // making the pattern fit the shape size
            null,  // no source cropping
            true   // preserving the default aspect ratio
        )
    )
    
    // Adding the shape to the canvas
    CVS.add(dummyShape)

    // Creating a dummy text display
    const dummyText = new TextDisplay("Hey, this is just\n some random text in\n order to fill up space,\n have a nice day! :D", [250, 250], (render, text)=>
            new Pattern(
                render, // the render instance
                Pattern.loadCamera(), // the source of the pattern, here it's we are requesting access to the live camera feed
                text, // making the pattern fit the size of the text
                null, // no source cropping
                false, // resizing will most likely change the aspect ratio
                Pattern.FORCE_UPDATE_LEVELS.RESPECT_FRAME_RATE // automatically resizes the pattern if the textDisplay size/pos changes
            ))
    
    // Adding the text to the canvas
    CVS.add(dummyText)

    // DUPLICATING PATTERN (Can be performance-heavy when using dynamic patterns such as video, camera, etc)
    // Creating and adding a basic shape that contains 9 dots in a 3x3 grid disposition
    const shape1 = new Shape([100,100],[new Dot([-50, -50]), new Dot([-50, 0]), new Dot([-50, 50]), new Dot([0, -50]), new Dot([0, 0]), new Dot([0, 50]), new Dot([50, -50]), new Dot([50, 0]), new Dot([50, 50])], 25)
    CVS.add(shape1)

    // Creating a pattern that will get duplicated for each dot of shape1 (set the "positions" (↓) parameter to the placeholder value)
    const duplicatedPattern = new Pattern(CVS.render, Pattern.loadCamera(), Pattern.PLACEHOLDER, null, null, null, null, null, 
        (pattern)=>{// readyCB
            // once the camera is loaded, set the shape1's color to the value of the pattern
            shape1.setColor(pattern)
        }
    )

    // SHARED PATTERN
    // Creating and adding a basic shape that contains 9 dots in a 3x3 grid disposition
    const shape2 = new Shape([300,100],[new Dot([-50, -50]), new Dot([-50, 0]), new Dot([-50, 50]), new Dot([0, -50]), new Dot([0, 0]), new Dot([0, 50]), new Dot([50, -50]), new Dot([50, 0]), new Dot([50, 50])], 25)
    CVS.add(shape2)

    // Creating a pattern that will get duplicated for each dot of shape1 (set the "positions" (↓) parameter to the area containing all the dots)
    const sharedPattern = new Pattern(CVS.render, Pattern.loadCamera(), _DynamicColor.getAutomaticPositions(shape2), null, null, null, null, null,
        (pattern)=>{// readyCB
            // once the camera is loaded, set the shape2's color to the value of the pattern
            shape2.setColor(pattern)
        }
    )

    // Creating a variable containing the color of the grid's symbol lines
    let gridLineColor = [255,0,0,1]

    // Creating a simple grid displaying a couple of letters
    const grid = new Grid("abc\nDEF\nghi", [5, 5], 50, null, [50,50], 2, null, null, 
        (render, dot, ratio, res, m, dist, shape, isActive)=>{// drawEffectCB
            // simple effect to change the dot's radius
            dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS, ratio, _Obj.DEFAULT_RADIUS)

            // drawing the grid's lines (connections) using the previous variable (↓). Note: the variable could also have been defined in the setupCB
            CanvasUtils.drawDotConnections(dot, render.profile1.update(gridLineColor, null, null, null, 2, [0]))
        }
    )

    // Adding the grid to the canvas. (This initializes it, which is needed to properly run getAutomaticPositions() on it)
    CVS.add(grid)

    // Assigning a pattern to the gridLineColor variable so it displays the camera as the color
    gridLineColor = new Pattern(CVS.render, Pattern.loadCamera(), _DynamicColor.getAutomaticPositions(grid), null, null, null, null, null, 
        (pattern)=>{// readyCB
            // (Optional): You can also set the dot's color to be this pattern. 
            // once the camera is loaded, we're also setting the grid's color to the value of the pattern
            grid.setColor(pattern)
        }
    )

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
        
        // Drawing a bezier curve from [100, 100] to [100, 200], using the default control points, in red
        render.stroke(Render.getBezierCurve([100,100], [100, 200]), [255, 0, 0, 1])
        
    }

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
        
        // Drawing a bezier curve from [100, 400] to [400, 300], using the default control points with 0.5 spread
        render.fill(Render.getQuadCurve(startPos, endPos, Render.getDefaultQuadraticControlPos([100, 400], [400, 300], 0.5)))
        
    }

    // Creating a new style profile from the RenderStyles' template profile
    const myNewStyleProfile = RenderStyles.DEFAULT_PROFILE.duplicate(CVS.render)

    // Adding a new style profile to the render's custom profile list
    CVS.render.profiles.push(myNewStyleProfile) //The style profile is now accessible via render.profiles

    // OR

    // use the render instance function: createCustomStylesProfile()

    {// Running in the drawEffectCB function of some shape...
        
        // ...
        
        // Drawing a line between a dot and its ratioPos, using the profile1 styles and updating the color, lineWidth, lineDash, lineDashOffset
        CanvasUtils.drawLine(dot, dot.ratioPos, render.profile1.update(Color.rgba(0,255,255,CDEUtils.mod(1, ratio, 0.8)), 4, [5, 25], 10))
    
        // Drawing a dot's connections, using again the profile1 styles and updating only the color, lineWidth
        CanvasUtils.drawDotConnections(dot, render.profile1.update([255,0,0,1], 2))
    }

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
        
        // Drawing a bezier curve from [100, 100] to [100, 200], using the styles from the render's profile1
        render.stroke(Render.getBezierCurve([100,100], [100, 200], [150, 100], [100, 150], render.profile1)
    }

    // Running in the drawEffectCB of a dummy shape...
    {
        ...
    
    // Drawing the connections between dots, and styling them with an updated version of render's profile1 and a custom lineType
    CanvasUtils.drawDotConnections(dot, render.profile1.update(
            Color.rgba(255, 0, 0, CDEUtils.mod(1, ratio, 0.8)), // updating the color to a dynamically shaded red
            4,   // updating the lineWidth to 4px
            [10] // updating the lineDash to 10px
        ),
        0, // no radius padding
        Render.LINE_TYPES.CUBIC_BEZIER // using a default bezier curve
    )
        
    }

    // Dummy animations
    const someAnim = new Anim(/* some parameters ... */)
    const anotherAnim = new Anim(/* some other parameters ... */)
    
    // This will run all both anims simultaneously
    dummyShape.playAnim(someAnim)
    dummyShape.playAnim(anotherAnim)

    // Dummy animations
    const someUniqueAnim = new Anim(/* some parameters ... */)
    const uniqueAnimationThatNeedsToRunNOW = new Anim(/* some other parameters ... */)
    
    // This will queue the animation to be run once all previously queued animations are completed.
    dot.playAnim(someUniqueAnim, true)
    
    // Will terminate and replace any animation running! (After 3 seconds)
    setTimeout(()=>{
        dot.playAnim(animationThatNeedsToRunNOW, true, true)
    }, 3000)

    // This will reset the animation to progress=0 
    anim.reset()

    // Getting a dot
    const dot = dummyShape.dots[0]
    
    // Creating the animation
    const fadingAnimation = new Anim(
        (progress)=>{
            // fading off the dot over 5 seconds
            dot.a = 1 - progress
            
            // deleting the dot once invisible
            if (progress == 1) dot.remove()
        },
        5000 // 5 second duration
    )

    // playing the animation
    dot.playAnim(fadingAnimation)

    let distance = 200, ix = dot.x
    dot.playAnim(new Anim((progress, playCount, deltaTime)=>{
        // fading the dot over 1 second
        dot.a = 1 - progress
        
        // moving the dot left or right depending on if the animation play count is pair
            dot.x = ix + ((playCount%2)||-1) * distance * progress
            if (progress==1) ix = dot.x
        
    }, -1000)) // repeats every 1 seconds because of the "-"

    // Setting the keydown listener
    CVS.setKeyDown()
    
    // Setting the keyup listener with a custom callback (typingDevice, event)=>
    CVS.setKeyUp((typingDevice, e)=>{
        console.log("Custom callback: ", typingDevice, e)
    })
    
    // OR
    
    // Setting both listeners globally. (This will detect the key inputs even when the canvas is not directly focused)
    CVS.setKeyDown(null, true)
    CVS.setKeyUp((typingDevice, e)=>{
        console.log("Custom callback: ", typingDevice, e)
    }, true)

    // Accessing the typing device's "a" key state
    const isKey_A_down = CVS.typingDevice.isDown("a")
    
    console.log("Is the 'a' key down: ", isKey_A_down)

    // Setting the mousemove listener
    CVS.setMouseMove()

    // Setting the mousedown listener with a custom callback (mouse, event)=>
    CVS.setMouseDown((mouse, e)=>{
        console.log("Custom callback: ", mouse, e)
    })

    // OR
    
    // Setting listeners globally. (This will detect the mouse inputs even if the mouse is not directly interacting with the canvas)
    CVS.setMouseMove(null, true)
    CVS.setMouseDown((mouse, e)=>{
        console.log("Custom callback: ", mouse, e)
    }, true)
    CVS.setMouseUp((mouse, e)=>{
        console.log("Other custom callback: ", mouse, e)
    }, true)

// Using the getDraggableDotCB utility function to get a dragCallback
const dragCallback = CanvasUtils.getDraggableDotCB()

// Creating a mostly default shape, with a single dot
const throwableDot = new Shape([10, 10], new Dot([10, 10]), null, null, null, 
    (render, dot, ratio, setupResults, mouse, dist, shape)=>{// drawEffectCB callback

        // Changing the dot's size based on mouse distance for an additional small effect
        dot.radius = CDEUtils.mod(shape.radius*2, ratio, shape.radius*2*0.5)
        
        // Checking if the mouse is hovering the dot
        const isMouseOver = dot.isWithin(m.pos, true)
        
        // if the mouse is over and clicked, set the dot's color to red
        if (isMouseOver && m.clicked) {
            dot.color = [255, 0, 0, 1]
        }
        // if the mouse is only over, set the dot's color to green
        else if (isMouseOver) {
            dot.color = [0, 255, 0, 1]
        }
        // if the mouse is neither over nor clicked, set the dot's color to white
        else {
            dot.color = [255, 255, 255, 1]
        }
    
        // Calling the dragCallback to make the dragging and throwing effect
        dragCallback(shape.dots[0], m, dist, ratio)
    }
)

// Adding the shape
CVS.add(throwableDot)

// (Running in the drawEffectCB() function of some shape...)
{
    ...
    // Draws a ring around the dot, 3x bigger than the dot's radius and of the same color
    CanvasUtils.drawOuterRing(dot, dot.colorObject, 3)   
}

    // (Running in dummyFilledShape' setupCB)
    // rotateGradient should only be called once, as it starts an infinite animation
    {
        ...
        // Rotates the shape's gradient filling. Completes a revolution in 3 seconds
        CanvasUtils.rotateGradient(dummyFilledShape, 3000, 1, true)
    }
    

// getDraggableDotCB should only be called once, but it returns a callback that needs to be called every frame

// (Running in of some js file)
// Provides the callback to make the dot throwable. 
const dragAnimCallback = CanvasUtils.getDraggableDotCB()

...

// (Running in the drawEffectCB() function of some shape...)
{
    ...
    // Only for the first dot of the shape
    if (shape.firstDot.id == dot.id) {
        // Makes the dot pickable in a 100px radius, and throwable using default CDE physics (works best on higher refresh rates)
        dragAnimCallback(dot, mouse, dist, ratio, 100)
    }
}

// getTrailEffectCB should only be called once, but it returns a callback that needs to be called every frame

// Here we create a shape with a single dot receiving the trail effect.
const trailingDot = new Shape([200, 100], new Dot(), null, "lime", null,
    (render, dot, ratio, [dragCB, trailCB], mouse, dist, shape)=>{// drawEffectCB
    
        // Make sure the effect is only running on the desired dot (Optional in this example, since there is only one dot)
        if (dot.id==shape.firstDot.id) {
            dragCB(shape.firstDot, mouse, dist, ratio) // see previous example for details
            trailCB(mouse) // call the trail effect callback every frame and give it the mouse in parameter
        }
}, null, (shape)=>{// setupCB

    // Here we get/initialize both effect callbacks in an array to be reused in the drawEffectCB
    return [
    
        CanvasUtils.getDraggableDotCB(), // see previous example for details
        
        
        // Creating a trail effect based on the shape's first dot, with a length of 10
        CanvasUtils.getTrailEffectCB(CVS, shape.firstDot, 10, (dot, ratio, isMoving, mouse)=>{// moveEffectCB
            
            // This callback is called every frame
            // "ratio" is the index of the object in the trail divided by the length of the trail
            // "isMoving" represents whether the object is currently moving or not
            
            //While the user is dragging/moving the dot, every trail object has a set value
            if (isMoving && mouse.clicked) {
                dot.a = ratio
                dot.radius = 25*(1-ratio)
            }

            // otherwise, the trail objects progressively lose visibility
            dot.a -= (1-ratio)/1000
            dot.radius = 25*ratio
        })
        
    ]
})

// Add the shape to the canvas
CVS.add(trailingDot)

// (Running in the drawEffectCB() function of some shape...)
{
    ...
    // Only if the distance with the ratioPos is lower than the shape's limit
    if (dist < shape.limit) {
        // Draws a line between the dot and the dot's ratioPos, adjusting the opacity of the line via the distance ratio
        CanvasUtils.drawLine(
            dot,        // start Dot
            [200, 200], // end position (can also be a Dot)
            render.profile.update(
                Color.rgba(dot.r,dot.g,dot.b,CDEUtils.mod(0.5, ratio)) // updates only the color, but uses every previously set styles
            )
        )
    }
}

// (Running in the drawEffectCB() function of some shape...)
{
    ...
    // Draws lines between the dot and its connections, using the shape's color, and with a start padding of 2.5x the radius
    CanvasUtils.drawDotConnections(dot, shape.colorObject, 2.5)
}

    dummyShape.dots[0].follow(5000, Anim.linear, null, CanvasUtils.FOLLOW_PATHS.CIRCLE(400, 400))

const manualSineWaveDrawer = new Shape([100, 100], [
    new Dot(), // adding a blank dot
    new Dot([10, 0],null,null,null,(dot, shape)=>shape.firstDot) // adding a dot with the first dot as its anchorPos
], null, null, 100, (render, dot, ratio)=>{// shape's drawEffectCB

    // drawing a dotted red line between the two dots
    CanvasUtils.drawDotConnections(dot, render.profile1.update([255,0,0,1], null, null, null, [5]))

    // simple radius hover effect
    dot.radius = CDEUtils.mod(_Obj.DEFAULT_RADIUS*2, ratio, _Obj.DEFAULT_RADIUS*2*0.8)

}, null, (shape)=>{// Shape's setupCB
    
    // making the first dot follow a circle path over 5 seconds
    shape.firstDot.follow(5000, null, (prog, dot)=>{
        shape.add(new Dot(null, 4, null, null, dot.pos)) // creating a new dot each frame at the dot's pos
    }, CanvasUtils.FOLLOW_PATHS.CIRCLE(null, null, 0.5))

    
    // making the second dot follow a linear path for its X value and not providing any forced Y value (The Y value will be changed via the anchorPos).
    shape.dots[1].follow(5000, Anim.LINEAR, (prog, dot)=>{
        shape.add(new Dot(null, 2, "red", null, dot.pos)) // creating a new dot each frame at the dot's pos
    }, CanvasUtils.FOLLOW_PATHS.RELATIVE(CanvasUtils.FOLLOW_PATHS.LINEAR(800, 0)))

    // adding a connection between the first and second dot
    shape.firstDot.addConnection(shape.dots[1])

}, null, null, true)

//Adding the shape to the canvas
CVS.add(manualSineWaveDrawer)

    // (Running in the drawEffectCB() function of some shape...)
    {
        ...
        // It is recommended to always put the ratio provided by drawEffectCB() as the second parameter of mod.
        // The dot opacity will go from 1(max) to 0.2(min) depending on the value of the ratio
        dot.a = CDEUtils.mod(1, ratio, 0.8)   
    }

// Creating a FPSCounter instance
const fpsCounter = new FPSCounter()

// Creating a Canvas
const CVS = new Canvas(canvas, ()=>{//loopingCB

    // Get the fps value (needs to be run each frame)
    const fpsValue = fpsCounter.getFps()
    
    // Displaying the live FPS
    document.getElementById("fps_display").textContent = fpsValue+" fps"
})

// Creating a static canvas uses the same declaration as a classic canvas
const staticCVS = new Canvas(canvasElement, ()=>{/*Custom callback that gets call each frame*/})

// ** Here you would declare and add all the shapes and objects **

// Here is a simple shape for example
const dummyShape = new Shape([100, 100],[new Dot([-50, -50]),new Dot([-50, 50]),new Dot([50, -50]),new Dot([50, 50]),])
staticCVS.add(dummyShape)

// Once declarations are done, initialize the canvas as static
staticCVS.initializeStatic()

// (Considering the example above ↑)
// You can use the following:

// Draw a single frame
staticCVS.drawStatic()

// Clear the canvas
staticCVS.clear()

// Clear the canvas and draw a frame
staticCVS.cleanDrawStatic()

/*
In this example, we compare two drawEffectCB that both do the same thing,
one version is optimized while the other isn't.
*/


const badDrawEffectCB = (render, dot, ratio, dragAnim, mouse, dist, shape)=>{

    // Logging the current dot to the console
    console.log(dot)

    // Dynamically updating the current dot's alpha
    dot.a = CDEUtils.mod(1, ratio, 0.6)
    
    // Drawing a line between the current dot and its ratioPos
    CanvasUtils.drawLine(dot, dot.ratioPos, render.profile1.update(Color.rgba(0,255,255,CDEUtils.mod(1, ratio, 0.8))))

    // Running the draggableCB to make ONLY the first dot draggable (here dragAnim comes from the setupCB)    
    dragAnim(shape.dots[0], mouse, dist, ratio)
    
    // Updating the first dot's color on mouse hover/click
    const mouseOn = shape.dots[0].isWithin(mouse.pos, true)
    if (mouseOn && mouse.clicked) shape.dots[0].color = [255, 0, 0, 1]
    else if (mouseOn) shape.dots[0].color = [0, 254, 0, 1]
    else shape.dots[0].color = [255, 255, 255, 1]
    
}



const optimizedDrawEffectCB = (render, dot, ratio, dragAnim, mouse, dist, shape, isActive)=>{

    // Never leave console logs in drawEffectCb for production as these cause ABSOLUTELY HORENDOUS LAG, especially when the console is opened.
    // DONT DO THIS -> console.log(dot)

    // This was pretty much already optimized
    dot.a = CDEUtils.mod(1, ratio, 0.6)
    
    // Here, since the alpha is going to be 0, we can prevent drawing when the lines are not visible anyway (outside the shape's limit)
    if (dist < shape.limit) CanvasUtils.drawLine(dot, dot.ratioPos, render.profile1.update([0,255,255,CDEUtils.mod(1, ratio, 0.8)]))

    // We can store the firstDot into a variable to avoid the object lookups each time
    const firstDot = shape.dots[0]
    
    // Since only the first dot is made draggable, it is better to avoid calling the dragAnim for each dot
    if (firstDot.id == dot.id) {
        dragAnim(firstDot, mouse, dist, ratio)
        
        // Again, the effect is only for the first dot
        // Here we use the provided "isActive" variable to make sure the mouse checks are only running when necessary
        if (isActive) {// (isActive is only true if ratio < 1)
            const mouseOn = firstDot.isWithin(mouse.pos, true)
            if (mouseOn && mouse.clicked) firstDot.color = [255, 0, 0, 1]
            else if (mouseOn) firstDot.color = [0, 254, 0, 1]
            else firstDot.color = [255, 255, 255, 1]
        }
    }
    
}