static/src/whiteboard.js
/**
     * Smoothly draw or erase given an array of points.
     * 
     * @param {CanvasRenderingContext2D} ctx - The context to draw/erase on
     * @param {string} ctx_mode - The mode of the context (destination-out, source-over)
     * @param {Array} points - The array of points to draw/erase
     * @param {number} lineWidth - The width of the line
     * @param {string} color - The color of the line
     */
Smoothly draw or erase given an array of points.


Smoothly draw or erase given an array of points .
smoothDraw(ctx, ctx_mode, points, lineWidth, color){
        ctx.globalCompositeOperation=ctx_mode;
        ctx.lineWidth = lineWidth;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        if(points.length < 6){
            var b = points[0];
            ctx.beginPath();
            ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0);
            ctx.closePath();
            ctx.fill();
            return;
        }
        ctx.beginPath(); 
        ctx.strokeStyle = color;
        ctx.moveTo(points[0].x,points[0].y);
        for (var i = 1; i < points.length - 2; i++) {
            var c = (points[i].x + points[i + 1].x) / 2;
            var d = (points[i].y + points[i + 1].y) / 2;
            ctx.quadraticCurveTo(points[i].x, points[i].y, c, d);
        }
        ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
        ctx.stroke();
    }
smoothDraw ( ctx , ctx_mode , points , lineWidth , color ) { ctx . globalCompositeOperation = ctx_mode ; ctx . lineWidth = lineWidth ; ctx . lineJoin = 'round' ; ctx . lineCap = 'round' ; if ( points . length < 6 ) { var b = points [ 0 ] ; ctx . beginPath ( ) ; ctx . arc ( b . x , b . y , ctx . lineWidth / 2 , 0 , Math . PI * 2 , ! 0 ) ; ctx . closePath ( ) ; ctx . fill ( ) ; return ; } ctx . beginPath ( ) ; ctx . strokeStyle = color ; ctx . moveTo ( points [ 0 ] . x , points [ 0 ] . y ) ; for ( var i = 1 ; i < points . length - 2 ; i ++ ) { var c = ( points [ i ] . x + points [ i + 1 ] . x ) / 2 ; var d = ( points [ i ] . y + points [ i + 1 ] . y ) / 2 ; ctx . quadraticCurveTo ( points [ i ] . x , points [ i ] . y , c , d ) ; } ctx . quadraticCurveTo ( points [ i ] . x , points [ i ] . y , points [ i + 1 ] . x , points [ i + 1 ] . y ) ; ctx . stroke ( ) ; }
Smoothly draw or erase given an array of points.
Smoothly draw or erase given an array of points .
// mouse left button must be pressed // if (e.buttons !== 1) return; // Set to ADD mode // Draw circle instead // begin // start point // draw a bunch of quadratics, using the average of two points as the control point