drawbetween.js
A JavaScript library for drawing images and shapes on the specified line segment.
Demo
https://higuri.github.io/drawbetween.js/sample/
Installation
via NPM
npm install drawbetween# or... yarn add drawbetween
CommonJS
const DrawBetween = ;
ES Module
;
via CDN
Usage Example
HTML
JavaScript
const canvas = document;const draw = canvas; // draw images between (0,0) and (250,0).const imageUrl = 'YOUR_IMAGE_URL';drawimagesx: 0 y: 0 x: 250 y: 0 imageUrl; // draw rects with default options.draw; // draw cross marks with custom options.draw; // draw custom paths.const drawer = { ctx; ctx; ctxfillStyle = '#0af'; ctx;};draw;
CodePen
https://codepen.io/higuri/pen/jJNNmB
API
DrawBetween(targetDiv)
new Create a new DrawBetween object.
targetDiv
: Element - a reference to <div> to be drawn.
line(p0, p1, options)
Draw a straight line between p0 and p1.
p0
: {x: number, y: number} - a start point of line.p1
: {x: number, y: number} - an end point of line.options
:width
: number - line width. <default: 1>strokeColor
: string - line color. <default: '#000'>lineDash
: number[] - distances to alternately draw a line and a gap. See CanvasRenderingContext2D.setLineDash() for details. <default: [0, 0]>
images(p0, p1, imageUrl, options)
Draw images on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.imageUrl
: string - a full URL of image to draw.options
:width
: 'original' | number - image width. <default: 'original'>height
: 'original' | number - image height. <default: 'original'>rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'>minInterval
: number - minimum spacing between adjacent images. <default: 0>borderColor
: string - border color of image. <default: '#000'>borderWidth
: number - border width of image. <default: 0>
rects(p0, p1, options)
Draw rectangles on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.options
:width
: number - rectangle width. <default: 20>height
: number - rectangle height. <default: 20>rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'>minInterval
: number - minimum spacing between adjacent rectangles. <default: 0>strokeColor
: string - stroke color of rectangle. <default: '#000'>strokeWidth
: number - stroke width of rectangle. <default: 0>fillColor
: string - fill color of rectangle. <default: '#000'>
circles(p0, p1, options)
Draw circles on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.options
:radius
: number - circle radius. <default: 10>minInterval
: number - minimum spacing between adjacent circles. <default: 0>strokeColor
: string - stroke color of circle. <default: '#000'>strokeWidth
: number - stroke width of circle. <default: 0>fillColor
: string - fill color of circle. <default: '#000'>
crossMarks(p0, p1, options)
Draw cross marks on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.options
:lineLength
: number - line length of cross mark. <default: 20>rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'>minInterval
: number - minimum spacing between adjacent cross marks. <default: 0>strokeColor
: string - stroke color of cross mark. <default: '#000'>strokeWidth
: number - stroke width of cross mark. <default: 0>
triangles(p0, p1, options)
Draw triangles on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.options
:edgeLength
: number - edge length of triangle. <default: 20>rotate
: 'auto' | number - rotation andgle in radians. <default: 'auto'>minInterval
: number - minimum spacing between adjacent triangles. <default: 0>strokeColor
: string - stroke color of triangle. <default: '#000'>strokeWidth
: number - stroke width of triangle. <default: 0>fillColor
: string - fill color of triangle. <default: '#000'>
withDrawer(p0, p1, drawer, options)
Draw specified paths on the specified line segment.
p0
: {x: number, y: number} - a start point of the line segment.p1
: {x: number, y: number} - an end point of the line segment.drawer
: ((ctx: CanvasRenderingContext2D, p: {x: number, y: number}) => void) - drawing function.option
:minInterval
: number - minimum spacing between adjacent paths. <default: 0>
clear()
Clear all drawings of the instance.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.