Paper.js Drawing Example

paper.js

        var thickness;
        var strokeColor;

        var text = new PointText(new Point(300, 200));
        text.content = "Click and Drag to Draw";
        text.characterStyle = {
            fontSize:36,
            fillColor:"#777777",//new RgbColor(119,119,119);
            font:"Arial"
        };
    
        var myPath;

        function onMouseDown(e) {

            if(text) {
                text.remove();
                text = null;
            }

            myPath = new Path();
            thickness = Math.random() * 30 + 10 | 0;

            var r = (Math.random()*255 | 0) / 255;
            var g = (Math.random()*255 | 0) / 255;
            var b = (Math.random()*255 | 0) / 255;

            myPath.style = {
                strokeColor: new RgbColor(r,g,b),
                strokeWidth:thickness,
                strokeCap:"round",
                strokeJoin:"round"
            }
        }

        function onMouseDrag(e) {
            myPath.add(e.point);
            myPath.smooth();
        }