cloning.md

^{📕 draw_code.001 → Cloning & Running Examples}

---

Cloning & Running Examples

The src/ folder contains some code examples similar to the artworks we will be creating during the workshop.

Each artwork in the src folder is contained in a single JavaScript file, and can be run locally with the canvas-sketch-cli tool.

Contents

• Cloning & Installing Dependencies

• Installing canvas-sketch-cli

• Running & Editing a Sketch

• Creating New Sketches

• Bundling to a Static Website

Cloning & Installing Dependencies

The first step is to clone this repository. Navigate with cd to a folder of your choice (such as ~/Desktop) and then run:

git clone https://github.com/drawcode-workshops/001.git draw_code-001

This will create a new folder called draw_code-001 and download all the source code into it. Next, move into the folder and install its dependencies:

# Move into the folder
cd draw_code-001

# Install its dependencies
npm install

Installing canvas-sketch-cli

If you haven't already, you will need to install the canvas-sketch command-line tool globally like so:

npm install canvas-sketch-cli --global

💡 Note the -cli suffix in the name; this tells npm to install the CLI tool, not the code library.

Once installed, you won't need to run this again unless you want to update to a new version of canvas-sketch-cli.

Running & Editing a Sketch

Once you've installed the CLI tool globally, cd into this repository folder and you can run each individual sketch with the canvas-sketch command, like so:

canvas-sketch src/2d/01-grid.js --open

The optional --open flag will open your default browser to the development server's URL, which is the same as http://localhost:9966.

Now, edit your JavaScript files and the browser will reload automatically.

Creating New Sketches

You can create a new sketch with the --new flag, which will write out a plain sketch file and start a development server so you can then edit it:

canvas-sketch src/my-new-sketch.js --new --open

Bundling to a Static Website

Once you are happy with your sketch, you can create a static website by bundling it up to a single HTML file. You can use the --build command, and --inline which will wrap all the JavaScript into an inline script tag so that you end up with just a single file for your site.

canvas-sketch src/my-new-sketch.js --build --inline

Try double-clicking the exported HTML file to see your website. This file can be shared on your favourite website host, like Neocities.

You can also turn on debugging (source maps) with the --no-compress option.

^{← Back to Documentation}