SimpleSketch

A standalone Angular component for simple canvas sketching using the Angular Material library. Try the demo.

Prerequisites

Node and npm

Installation and Usage

1. Install:

npm install simple-sketch

2. Import into your component's .ts file:

/* ----------------------------------------------------------
 * my-component.ts
 * ----------------------------------------------------------*/
import {Component} from '@angular/core';
import {SimpleSketchCanvasComponent} from 'simple-sketch';

@Component({
  selector: 'app-my-component',
  templateUrl: 'my-component.html',
})
export class MyComponent {}

3. Import SimpleSketch's styles into your global stylesheet: (e.g. styles.scss)

/* ----------------------------------------------------------
 * styles.scss
 * ----------------------------------------------------------*/
@import '../node_modules/simple-sketch/assets/styles.css';

4. Use the simple sketch component in your component's template:

<!----------------------------------------------------------
 * my-component.html
 * ---------------------------------------------------------->
<simple-sketch-canvas
  backgroundColor="#000000"
  paintColor="#ffffff"
  [showToolbar]="true"
>
</simple-sketch-canvas>

Run the Demo App

Run ng serve, then navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.