draw-canvas-component

Custom Webcomponent for resizable canvas with built-ing drawing functionality.

Usage no npm install needed!

<script type="module">
  import drawCanvasComponent from 'https://cdn.skypack.dev/draw-canvas-component';
</script>

README

Draw Canvas Component

An HTML Custom Element for drawing.

NPM Version

Draw Canvas is a custom element that implements a resizeable HTML canvas with drawing functionality built in. Unlike the standard HTML5 canvas element, the draw-canvas component's size is determined by the css applied to the element, and the component can resize without losing any of the data drawn to the canvas.

Installation

npm:

npm install draw-canvas-component --save

Usage

Register the draw-canvas custom element by pulling in the bundle.js script from node modules.

<script src="node_modules/draw-canvas-component/dist/bundle.js"></script>

Add a draw-canvas tag to your markup

<draw-canvas></draw-canvas>

Attributes

  • strokeColor - Color of draw stroke (default: #000)
  • strokeWeight - Thickness of draw stroke (default: 1)

Providing attributes in tag is optional

<draw-canvas stroke-color="#f00" stroke-weight="3"></draw-canvas>

Can also be set using javascript.

var drawCanvas = document.querySelector('draw-canvas');
drawCanvas.strokeColor = '#f00';  // draw in red
drawCanvas.strokeWeight = 3;      // 3px stroke weight

Helper Methods

  • clear - Clears canvas content
drawCanvas.clear();

Styling Caveats

There are two inline style rules applied to the element that can only be overridden using !important.

The default display value for the component is display: block. The component will collapse if given a value of display: inline.

By default the element will have no scrolling enabled, however scrolling can be enabled through css:

draw-canvas {
  overflow: scroll !important;
}

Browser Support

Custom elements are not supported by all browsers (https://caniuse.com/#feat=custom-elements). There are polyfills available if support for these browsers is required. Follow the instructions here for installation and usage of polyfills.

Development setup

To set up for development, clone this repository.

npm install
npm start

Start script will watch for changes inside src folder, rebuild and hot reload the example project. To modify the example project, change index.html to your liking, example styles found in assets/styles/styles.css, and some example javascript interactions in assets/js/index.js.

To run tests including linting

npm run test

Meta

Aaron Romel – @_lynques – lynques.io@gmail.com

Distributed under the MIT license. See LICENSE for more information.

https://github.com/lynques

Contributing

  1. Fork it (https://github.com/lynques/draw-canvas-component/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request against main branch