Skip to content

Latest commit

 

History

History
128 lines (83 loc) · 4.09 KB

installation.md

File metadata and controls

128 lines (83 loc) · 4.09 KB

📕 canvas-sketch → Documentation → Installation

Installation

The recommended way to use canvas-sketch and its tooling is with its command-line interface. This will run a local development server that handles browser reload on file save, high-quality PNG exporting, and other features.

Requirements:

  • Node.js 8.0.0 or higher
  • npm 5.6.0 or higher
  • A command-line terminal (such as the default Terminal.app in macOS, or cmder in Windows)

If you don't have these tools, or would rather not use them, see the following:

Quick Start

The fastest way to get started is to install the tool globally with npm.

In your terminal, enter the following:

# Install the CLI tool globally
npm install canvas-sketch-cli -g

# Make a new folder to hold all your sketches
mkdir my-sketches

# Move into that folder
cd my-sketches

# Start a new sketch and open the browser
canvas-sketch --new --open

This does a few things:

  • Stub out a new sketch into sketches/[current-timestamp].js
  • Generate a default package.json for your dependencies
  • Install any required dependencies (in this case, canvas-sketch)

It also launches your default browser to http://localhost:9966/ (the development server), showing a blank white canvas.

Now you can edit the newly created JavaScript file in the sketches/ folder. When you save changes, the browser will reload immediately.

For example, try changing the 'white' fill style to 'red'.

const canvasSketch = require('canvas-sketch');

const settings = {
  dimensions: [ 2048, 2048 ]
};

const sketch = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'red'; // <-- Try changing the color
    context.fillRect(0, 0, width, height);
  };
};

canvasSketch(sketch, settings);

💾 Exporting as PNG

In the browser, hit Cmd + S or Ctrl + S to export your canvas as a PNG file. It will be saved to your ~/Downloads folder (and similar across other platforms).

💡 A Few More Examples to Try

Now that you've got it running, you could try out a few different commands:

# Run the development server on an existing file
canvas-sketch src/foobar.js

# Start a new sketch from the Three.js template
canvas-sketch --new --template=three --open

# Build your sketch to a sharable HTML + JS website
canvas-sketch sketches/my-sketch.js --build

# Paste the clipboard contents & run a new sketch at './foo.js'
pbpaste | canvas-sketch foo.js --new

Updating canvas-sketch

To update the CLI tool, you can re-install it globally:

npm install canvas-sketch-cli@latest -g

When you run canvas-sketch in a folder, it will often install the library locally as a dependency in your package.json for that folder. To update this, you can re-install the library (not the CLI) locally in each project folder that uses it:

npm install canvas-sketch@latest

Installing the CLI Locally

If you prefer not to install your CLI tools globally, you can install the CLI locally in each project that you need it by saving it as a devDependency:

npm install canvas-sketch-cli --save-dev

Now, to run it in each project, you can add canvas-sketch commands to your npm run scripts, or use npx to run the locally-installed version:

npx canvas-sketch my-sketch.js --open

Now that you're set up, you might like to read A "Hello, World" Sketch.

← Back to Documentation