Code Monkey home page Code Monkey logo

simple-whiteboard's Introduction

Simple Whiteboard

NPM FOSSA Status

Simple Whiteboard is a simple web-based whiteboard application that allows users to draw on a canvas.

The application is built as a Web Component using LitElement. This allows the whiteboard to be easily embedded in any web application regardless of the framework used.

Features

  • Different drawing tools:
    • Rectangle
    • Circle
    • Line
    • Pen
    • Text
    • Picture
  • Move the canvas using the Move tool
  • Clear the canvas
  • Support mouse and touch input

Used Technologies

  • LitElement - A simple base class for creating fast, lightweight web components.
  • TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
  • Rough.js - A small graphics library that lets you draw in a sketchy, hand-drawn-like, style.
  • Perfect Freehand - A tiny library for rendering perfect freehand lines.
  • Feather Icons - Simply beautiful open source icons.

License

Simple Whiteboard is licensed under the MIT License.

FOSSA Status

simple-whiteboard's People

Contributors

ludovicm67 avatar dependabot[bot] avatar github-actions[bot] avatar fossabot avatar

Watchers

avatar

Forkers

fossabot

simple-whiteboard's Issues

Pen Tool

The user should be able to draw on the canvas using a pen.

Color selection for tools

By default, every element is done in black.
The user should be able to pick another color for any element.

Rectangle Tool

The user should be able to draw a rectangle on the canvas

Picture Tool

The user should be able to import a picture on the canvas.

Line Tool

The user should be able to draw a line on the canvas

Move Tool

The user should be able to move the canvas

Delete an item

A user should be able to remove an object from the canvas.

Text Tool

The user should be able to add some text on the canvas

Zoom Tool

The user should be able to adjust the zoom level (increase/decrease/reset) the zoom level.

Add touch support

Right now, only mouse events are listened.
It could be interesting to also listen for touch events.

Clear Tool

The user should be able to clear the canvas.

Circle Tool

The user should be able to draw a circle on the canvas

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.