Canvas Lines | WeAnswer

Draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() method.



<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(50, 150);
      context.lineTo(440, 100);
      context.stroke();
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(50, 150);

context.lineTo(440, 100);

context.stroke();

</script>

</body>

</html>

Result

Property

context.lineWidth = 15;

context.strokeStyle = ‘#ff0000’;
context.stroke();

context.lineWidth = 20;
context.strokeStyle = ‘#0000ff’;
context.lineCap = ’round’;
context.stroke();

WeAnswer

See author's posts

Tags: Canvas Line

WeAnswer

Amazing html canvas examples

html5 capture image from camera

Canvas Element

How to set EC2 Ubuntu default password

CPU & Memory usage in PHP

Install PHP mcrypt extension on Ubuntu

How to reset or change the MySQL root password?

Leave a Reply Cancel reply

More Stories

You may have missed