Return this.drawWavyLineWithArrow(item, points) įabricCanvas. Next, add curved lines that follow the curved of your wave sketch to add a sense of motion to the waves. Along the top half of your wave, add a rough curving line to add shape to the lip of your wave drawing. Return this.drawLineWithArrow(item, points, colors.BLACK) Then, draw a smaller curved line from the center, curving down and toward the right for the center tube of a wave. import LineWithArrow from './LineWithArrow' ĭrawLineWithArrow = (item, points, color) => ( Note that the start point of the line is drawn on mousedown and the endpoint is drawn on mouseup. Here is the code I'm using to draw the straight line with the arrow endpoint.

The user can draw the line as long as they want so the number of 'peaks' and 'troughs' in the line will need to adapt accordingly (a short line like the image above might have 4 peaks but a line twice the length would have 8 peaks, not just be a stretched version of the shorter line).

One of the lines is a wavy line with an arrow similar to this: Ive successfully created.

Viewed 3k times 6 Im using FabricJS to create a canvas for drawing specific lines and shapes. I've successfully created a straight version of this with an arrow endpoint but can't find any examples of how to create a wavy line. Ask Question Asked 5 years, 2 months ago. One of the lines is a wavy line with an arrow similar to this: I'm using FabricJS to create a canvas for drawing specific lines and shapes.

Line drawing waves