paintpad v2.0.5

PaintPad

Canvas component which allows freeform painting.

demo

Installation

Yarn

yarn add paintpad

NPM

npm install --save paintpad

UNPKG

<script src="https://unpkg.com/paintpad/dist/index.js" defer></script>

Usage

HTML

<paint-pad
  width="300px"
  height="300px"
  lineWidth="15"
  lineWidthMin="5"
  lineWidthMax="25"
  color="#ffdab9"
  hasSlider="true"
  hasColorPicker="true"
  isClearable="true"
  isDownloadable="true"
  isStateChangeable="true"
></paint-pad>

JavaScript

import { PaintPad } from "paintpad";

const paintPad = new PaintPad({
  width: "300px",
  height: "300px",
  lineWidth: 15,
  lineWidthMin: 5,
  lineWidthMax: 25,
  color: "#ffdab9",
  hasSlider: true,
  hasColorPicker: true,
  isClearable: true,
  isDownloadable: true,
  isStateChangeable: true,
});

document.getElementById("paint-pad-container").append(paintPad);

Angular

// app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  ...
})

// app.component.html

<paint-pad #paintPad width="300px" color="#ffdab9"></paint-pad>

// app.component.ts

import "paintpad";

export class AppComponent {
  @ViewChild('paintPad') public paintPad!: ElementRef;

  public clear(): void {
    this.paintPad.nativeElement.clear();
  }
}

React

import "paintpad";

function App() {
  const paintPad = useRef(null);

  const clear = () => paintPad.current.clear();

  return <paint-pad ref={paintPad} width="300px" color="#ffdab9"></paint-pad>;
}

Options

Methods