README
Draw Canvas Component
An HTML Custom Element for drawing.
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.
Contributing
- Fork it (https://github.com/lynques/draw-canvas-component/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request against
main
branch