Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Canvas Shapes HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 108
    Comment on it

    1- Custom shape in Canvas

    If you need to create a custom shape with HTML5 Canvas, first you have to create a path and then close it using the closePath() method. Use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up your shape.

    script :-

    <script>
      var canvas = document.getElementById('myCanvas1');
      var context = canvas.getContext('2d');
    
      // begin custom shape
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
    
      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    </script>
    

    HTML :-

    <canvas id="myCanvas1" width="578" height="200"></canvas>
    

    2- Rectangle shape in Canvas

    If you want to create a rectangle using HTML5 Canvas, you can use the rect() method. x and y parameters is used for positioning and height and width parameters are used for sizing an HTML5 Canvas rectangle. Also the rectangle is positioned about its top left corner.

    script :-

    <script>
          var canvas = document.getElementById('myCanvas2');
          var context = canvas.getContext('2d');
    
          context.beginPath();
          context.rect(188, 50, 200, 100);
          context.fillStyle = 'yellow';
          context.fill();
          context.lineWidth = 7;
          context.strokeStyle = 'black';
          context.stroke();
    </script>
    

    HMTL :-

    <canvas id="myCanvas2" width="578" height="200"></canvas>
    

    3- Circle shape in Canvas

    If you want to draw a circle with HTML5 Canvas, First you have to create a full arc and define the starting angle as 0 and the ending angle as 2 * PI by using the arc() method.

    script :-

    <script>
          var canvas = document.getElementById('myCanvas3');
          var context = canvas.getContext('2d');
          var centerX = canvas.width / 2;
          var centerY = canvas.height / 2;
          var radius = 70;
    
          context.beginPath();
          context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
          context.fillStyle = 'green';
          context.fill();
          context.lineWidth = 5;
          context.strokeStyle = '#003300';
          context.stroke();
    </script>
    

    HTML :-

     <canvas id="myCanvas3" width="578" height="200"></canvas>
    

    4- Semicircle shape in Canvas

    If you want to create a semicircle with HTML5 Canvas, First create an arc using the arc() method and then define the ending angle has startAngle + PI.

    script :-

    <script>
          var canvas = document.getElementById('myCanvas4');
          var context = canvas.getContext('2d');
    
          context.beginPath();
          context.arc(288, 75, 70, 0, Math.PI, false);
          context.closePath();
          context.lineWidth = 5;
          context.fillStyle = 'red';
          context.fill();
          context.strokeStyle = '#550000';
          context.stroke();
    </script>
    

    HTML :-

    <canvas id="myCanvas4" width="578" height="200"></canvas>
    

 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: