Reusable Drawing Widget Demo and Guide

Start here: choose the website type

For a normal website, the client only needs to copy these two files:

drawing-widget.js
drawing-widget.css

This page is not one long tutorial from top to bottom. Choose the setup path that matches the website.

HTML / PHP / WordPress Use this when you can edit an HTML page directly. React Use this for Vite React or Create React App projects. Next.js Use this for Next.js App Router projects with client components.

The README, demo.html, and THIRD_PARTY_NOTICES files are documentation. The actual reusable widget needs the JavaScript and CSS files.

HTML website tutorial

Use this when the website is a normal HTML page, PHP page, WordPress custom page, or any page where HTML can be edited.

Choose this path only for normal HTML-style websites. Skip the React and Next.js sections if this is the website type.

Put the CSS link inside the <head> section.
Put the canvas container inside the <body> where the canvas should appear.
Put the JavaScript before the closing </body> tag.

<!doctype html>
<html>
  <head>
    <!-- 1. Put this inside <head> -->
    <link rel="stylesheet" href="drawing-widget.css">
  </head>
  <body>
    <h1>My Website</h1>

    <!-- 2. Put this where the drawing canvas should appear -->
    <div id="drawing-widget"></div>

    <!-- 3. Put this before </body> -->
    <script src="drawing-widget.js"></script>
    <script>
      DrawingWidget.init("#drawing-widget");
    </script>
  </body>
</html>

If files are in assets folder

This is a reference section for HTML-style websites. If the files are stored inside an assets folder, include assets/ in the file path.

your-website/
|-- index.html
`-- assets/
    |-- drawing-widget.js
    `-- drawing-widget.css

<!-- Inside <head> -->
<link rel="stylesheet" href="assets/drawing-widget.css">

<!-- Before </body> -->
<script src="assets/drawing-widget.js"></script>

Simple customization

This reference works for HTML, React, and Next.js. The widget works with no options, but the client can change common settings.

<script>
  DrawingWidget.init("#drawing-widget", {
    width: 600,
    height: 400,
    defaultColor: "#000000",
    defaultBrushSize: 5,
    downloadFilename: "my-drawing.png"
  });
</script>

React tutorial

In React, copy the two widget files into the app's public folder.

Choose this path only for React apps. Skip the HTML and Next.js setup paths if this is the website type.

my-react-app/
|-- public/
|   |-- drawing-widget.js
|   `-- drawing-widget.css
|-- src/
|   `-- App.jsx

Files inside public are loaded from the root website path.

public/drawing-widget.css becomes /drawing-widget.css
public/drawing-widget.js  becomes /drawing-widget.js

Step 1: add CSS in the React HTML entry file

For Vite React, this is usually index.html in the project root. For Create React App, this is usually public/index.html.

<!-- Vite React: index.html -->
<!-- Create React App: public/index.html -->
<head>
  <link rel="stylesheet" href="/drawing-widget.css">
</head>

Step 2: load the widget in React

import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = "/drawing-widget.js";
    script.onload = () => {
      window.DrawingWidget.init("#drawing-widget");
    };

    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return <div id="drawing-widget" />;
}

Next.js tutorial

In Next.js, copy the files into the public folder too.

Choose this path only for Next.js apps. Skip the HTML and React setup paths if this is the website type.

my-next-app/
|-- public/
|   |-- drawing-widget.js
|   `-- drawing-widget.css
|-- app/
|   |-- layout.jsx
|   `-- page.jsx

Step 1: add CSS in app/layout.jsx

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="/drawing-widget.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Step 2: initialize in a client component

"use client";

import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = "/drawing-widget.js";
    script.onload = () => {
      window.DrawingWidget.init("#drawing-widget");
    };

    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return <div id="drawing-widget" />;
}

Next.js must use a client component because this widget uses window and document.

Multiple widgets

This reference works for HTML, React, and Next.js. Use a different container ID for each widget.

<div id="drawing-widget-1"></div>
<div id="drawing-widget-2"></div>

<script>
  DrawingWidget.init("#drawing-widget-1");

  DrawingWidget.init("#drawing-widget-2", {
    width: 400,
    height: 300
  });
</script>

What the user can do

Draw with mouse, touch, or pen input.
Change brush color and brush size.
Pick from a basic color palette, or use the first Custom color button for manual color selection.
See a round cursor preview that follows the brush or eraser size.
Use brush, eraser, clear, undo, and redo.
Download the drawing as a PNG image.

This widget does not save drawings to a server or database.

All options

This is a reference table. These options can be used after choosing the correct setup path above.

DrawingWidget.init("#drawing-widget", {
  width: 600,
  height: 400,
  backgroundColor: "#ffffff",
  defaultColor: "#000000",
  defaultBrushSize: 5,
  showToolbar: true,
  enableUndoRedo: true,
  enableDownload: true,
  historyLimit: 50,
  downloadFilename: "drawing.png"
});

Option	Default	Meaning
`width`	`600`	Canvas image width in pixels.
`height`	`400`	Canvas image height in pixels.
`backgroundColor`	`"#ffffff"`	Canvas background color.
`defaultColor`	`"#000000"`	Starting brush color.
`defaultBrushSize`	`5`	Starting brush size.
`showToolbar`	`true`	Shows or hides the tool buttons.
`enableUndoRedo`	`true`	Shows or hides Undo and Redo buttons.
`enableDownload`	`true`	Shows or hides the Download button.
`historyLimit`	`50`	Maximum undo history steps.
`downloadFilename`	`"drawing.png"`	File name used when downloading.

Demo and setup guide

Main widget

Second instance