Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Make a line in Canvas on mouse click

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 38
    Comment on it

    HTML5 Canvas element is used for making 2D graphics in browser. Canvas has several methods to draw 2D graphics path, boxes, line, circle, rectangle etc. One of these we are using here is line method.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
            canvas{border: 2px solid #000;}
        </style>
    </head>
    <body>
    <canvas id="canvas" width="500" height="500"></canvas>
        <script>
        var clicks = 0;
    var lastClick = [0, 0];
    
    document.getElementById('canvas').addEventListener('click', drawLine, false);
    
    function getCursorPosition(e) {
        var x;
        var y;
    
        if (e.pageX != undefined && e.pageY != undefined) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
    
        return [x, y];
    }
    
    function drawLine(e) {
        context = this.getContext('2d');
    
        x = getCursorPosition(e)[0] - this.offsetLeft;
        y = getCursorPosition(e)[1] - this.offsetTop;
    
        if (clicks != 1) {
            clicks++;
        } else {
            context.beginPath();
            context.moveTo(lastClick[0], lastClick[1]);
            context.lineTo(x, y, 6);
    
            context.strokeStyle = '#000000';
            context.stroke();
    
            clicks = 0;
        }
    
        lastClick = [x, y];
    };
    
        </script>
    </body>
    </html>
    

    Place the starting and ending point in the block to make a line.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: