Closed yellow88888 closed 1 year ago
Same situation for me, follow this issue.
When you have an HTML element like below:
<div id="canvas-container"></div>
You can specify that element to be the parent of the canvas in the settings
:
const settings = {
parent: document.querySelector("#canvas-container")
}
Similarly, you can also use an existing canvas element using settings.canvas
property.
There's a few ways to do this:
canvasSketch
, you just export the sketch function and settings. Then you can import these into your app (the app might use React, esbuild, Svelte, whatever) and bundle it all together. Whatever framework you are using needs to be able to import modules and bundle them for web.canvas-sketch --build
(see here)First of all, thanks Matt @mattdesl for creating such amazing tool!
I followed the instructions and used the codes @cdaein provided but couldn't manage to build the website as expected.
Here were the command I inputted in the terminal and the result:
$ canvas-sketch hero-section.js --html=./output/page.html --js=bundle.js --build
→ Building... → HTML → hero-section.html (250 B) → JS → bundle.js (57.7 kB) → SrcMap → bundle.js.map (213 kB) → Finished in 2.2s
hero-section.js
is the canvas-sketch file I'm working on, while the page.html
is the file I targeted to render the canvas on. As suggested I included <div id="canvas-container"></div>
in the page.html
file and had the canvas setting as:
const settings = {
parent: document.querySelector("#canvas-container"),
dimensions: [1920, 1080],
animate: true,
};
As the result showed, a new hero-section.html
file was created instead of having the existing page.html
file being modified.
Would you please advise what I have done incorrectly in the setup? Thank you!
Hi guys. Just want to let you know I can finally manage to render my canvas into the targeted div container. I just needed to move back the .js and .js.map files to the same directory of the .html file. Everything works fine now! :)
For future, you might want to do this instead, it will place all files in a folder called ./output
with the name canvas.{html,js}
canvas-sketch sketch.js --build --dir=output --name=canvas
Hi, I'm playing around with canvas sketch for creating visuals. Now i'm looking for the best way to place it on a website. If i use the build tool of canvas sketch i don't have control over the "canvas" tag, i can't place it inside another div for example. Is there a solution for that? Or is it better to work with p5.js (which seem to be used online a lot) and combine it with canvas sketch? Thanks in advance.