var script document createElement script script type text javascript script src https unpkg com roughjs latest bundled rough js document head appendChild script document body style height 300pt script onload function let canvas document createElement canvas canvas width 400 canvas height 320 document body appendChild canvas const rc rough canvas canvas rc rectangle 10 10 90 90 x y width height rc rectangle 40 20 40 90 x y width height rc circle 80 120 50 centerX centerY diameter rc ellipse 300 100 150 80 centerX centerY width height rc line 80 120 300 100 x1 y1 x2 y2 rc circle 50 50 80 fill red fill with red hachure rc rectangle 120 15 80 80 fill red rc circle 50 150 80 fill rgb 10 150 10 fillWeight 3 thicker lines for hachure rc rectangle 220 15 80 80 fill red hachureAngle 60 angle of hachure hachureGap 8 rc rectangle 120 105 80 80 fill rgba 255 0 200 0 2 fillStyle solid solid fill rc path M80 80 A 45 45 0 0 0 125 125 L 125 80 Z fill green rc path M230 80 A 45 45 0 1 0 275 125 L 275 80 Z fill purple rc path M80 230 A 45 45 0 0 1 125 275 L 125 230 Z fill red rc path M230 230 A 45 45 0 1 1 275 275 L 275 230 Z fill blue var script document createElement script script type text javascript script src https unpkg com roughjs latest bundled rough js document head appendChild script document body style height 300pt script onload function let canvas document createElement canvas canvas width 400 canvas height 320 document body appendChild canvas const rc rough canvas canvas M moveto L lineto H horizontal lineto V vertical lineto C curveto S smooth curveto Q quadratic Bzier curve T smooth quadratic Bzier curveto A elliptical Arc Z closepath rc path M 10 10 L 25 80 L 50 200 L 100 100 Z fill green end onload var script document createElement script script type text javascript script src https unpkg com roughjs latest bundled rough js document head appendChild script let points let rc null let canvas null document body style height 300pt script onload function canvas document createElement canvas canvas width 600 canvas height 400 canvas id canvas document body appendChild canvas rc rough canvas canvas end onload document body onmouseup function const context canvas getContext 2d context clearRect 0 0 canvas width canvas height if points length 2 return let p M points 0 x points 0 y for let i 1 i points length i p L points i x points i y p Z rc path p fill green rc path M 10 10 L 25 80 L 50 200 L 100 100 Z fill green document body onmousedown function e points push x e pageX y e pageY console log click output window to add points and draw a shape
let canvas document createElement canvas canvas width 400 canvas height 320 document body appendChild canvas const rc rough canvas canvas M moveto L lineto H horizontal lineto V vertical lineto C curveto S smooth curveto Q quadratic Bzier curve T smooth quadratic Bzier curveto A elliptical Arc Z closepath rc path M 10 10 L 25 80 L 50 200 L 100 100 Z fill green end onload var script document createElement script script type text javascript script src https unpkg com roughjs latest bundled rough js document head appendChild script let points let rc null let canvas null document body style height 300pt script onload function canvas document createElement canvas canvas width 600 canvas height 400 canvas id canvas document body appendChild canvas rc rough canvas canvas end onload document body onmouseup function const context canvas getContext 2d context clearRect 0 0 canvas width canvas height if points length 2 return let p M points 0 x points 0 y for let i 1 i points length i p L points i x points i y p Z rc path p fill green rc path M 10 10 L 25 80 L 50 200 L 100 100 Z fill green document body onmousedown function e points push x e pageX y e pageY console log click output window to add points and draw a shape