HTML canvas bezierCurveTo() Draw connected bezier curve

Description

HTML canvas bezierCurveTo() Draw connected bezier curve

View in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                //from w ww  . jav  a2  s  .c o  m
                var startX = 150;
                var startY = 100;
                
                // draw cloud shape
                context.beginPath();
                context.moveTo(startX, startY);
                context.bezierCurveTo(startX - 40, startY + 20, startX - 40, startY + 70, startX + 60, startY + 70);
                context.bezierCurveTo(startX + 180, startY + 130, startX + 150, startY + 100, startX + 170, startY + 70);
                context.bezierCurveTo(startX + 150, startY + 70, startX + 250, startY + 40, startX + 220, startY + 20);
                context.bezierCurveTo(startX + 260, startY - 40, startX + 200, startY - 50, startX + 170, startY - 30);
                context.bezierCurveTo(startX + 250, startY - 75, startX + 80, startY - 60, startX + 80, startY - 30);
                context.bezierCurveTo(startX + 130, startY - 175, startX - 20, startY - 60, startX, startY);
                context.closePath();
                

                // set the line width and stroke color
                context.lineWidth = 5;
                context.strokeStyle = "#0000ff";
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>



PreviousNext

Related