Using a sketch on a website

[yellow88888]

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.

[giodum]

Same situation for me, follow this issue.

[cdaein]

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.

[mattdesl]

There's a few ways to do this:

1. Write your sketch as normal, but instead of running 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.
2. Use canvas-sketch as your website bundler/builder. I do this for small sites, using the code that @cdaein shows to target a specific DOM container for the canvas, and then I bundle the whole site with canvas-sketch --build (see here)
3. Export your function to window scope, build with canvas-sketch and use it later in your framework of choice (eg: vanilla JS). See here for an example.

[ling-dev]

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!

[ling-dev]

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! :)

[mattdesl]

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