Home

Welcome to canvasGUI

Using canvasGUI in your own webpages?

To use canvasGUI in your own webpage add the following code to the HTML in your webpage

  <script src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI@2.0.0/dist/lib/gui.min.js"></script>

replacing 1.1.0 with the library version number you wish to use.

If you don't include a version number, the latest available version will be used i.e.

  <script language="javascript" type="text/javascript"
    src="https://cdn.jsdelivr.net/gh/quarks/canvasGUI/dist/lib/gui.min.js">
  </script>

What is canvasGUI?

canvasGUI provides an on-canvas GUI environment created for the p5.js library. Unlike other GUI libraries that connect the sketch to UI elements on the web page, canvasGUI's controls appear on the actual canvas element. This makes it an ideal choice if you want to share your sketches on sites such as OpenProcessing

How do I find out more?

Use the INDEX on the right hand pane to find guides to using canvasGUI and other useful resources such as the canvasGUI website and API reference.

The release of canvasGUI v2 is supported with a new account dedicated to canvasGUI on the p5js web editor. It has many annotated sketches demonstrating most of the library controls and features.

What do I do now?

The next step is to create your first sketch. Follow the links in the INDEX and have fun 😁