HTML5 Game - Drawing arcs in response to mouse movements

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Arc

Description

Drawing arcs in response to mouse movements

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            let canvasElem = document.getElementById("canvas");
            let ctx = canvasElem.getContext("2d");
        //from   ww  w  . j  a v  a2 s .  com
            let point1 = [100, 10];
            let point2 = [200, 10];
            let point3 = [200, 110];
        
            draw();
        
            canvasElem.onmousemove = function (e) {
                if (e.ctrlKey) {
                    point1 = [e.clientX, e.clientY];
                } else if(e.shiftKey) {
                    point2 = [e.clientX, e.clientY];    
                } else {
                    point3 = [e.clientX, e.clientY];
                }
                ctx.clearRect(0, 0, 540, 140);
                draw();
            }
        
            function draw() {
        
                ctx.fillStyle = "yellow";
                ctx.strokeStyle = "black";
                ctx.lineWidth = 4;
            
                ctx.beginPath();
                ctx.moveTo(point1[0], point1[1]);
                ctx.arcTo(point2[0], point2[1], point3[0], point3[1], 50);
                ctx.stroke();
                
                drawPoint(point1[0], point1[1]);
                drawPoint(point2[0], point2[1]);
                drawPoint(point3[0], point3[1]);
                
                ctx.beginPath();
                ctx.moveTo(point1[0], point1[1]);
                ctx.lineTo(point2[0], point2[1]);
                ctx.lineTo(point3[0], point3[1]);
                ctx.stroke();
            }
        
            function drawPoint(x, y) {
                ctx.lineWidth = 1;
                ctx.strokeStyle = "red";
                ctx.strokeRect(x -2, y-2, 4, 4);
            }
        </script>
    </body>
</html>

The example moves different points based on which key is pressed as the mouse is moved.

  • If the control key is pressed, the first point is moved.
  • If the shift key is pressed, the second point is moved.
  • If neither key is pressed, the third point is moved.

Related Topic