Demo - Basics of HTML5 Canvas Line Refer Tutorial Beginners guide to HTML5 Canvas

How to draw line in HTML5 Canvas Element

<canvas id="canvasLine" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('canvasLine');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.stroke();
</script>


Beginners guide to HTML5 Canvas

How to set line width in HTML5

<canvas id="lineWidth" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineWidth');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.stroke();
</script>


Beginners guide to HTML5 Canvas

How to set line color in HTML5

<canvas id="lineColor" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineColor');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.strokeStyle = '#c93f27';
context.stroke();
</script>


Beginners guide to HTML5 Canvas

How to draw round, butt, square lines

<canvas id="lineButt" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineButt');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.strokeStyle = '#c93f27';
context.lineCap = 'butt';
context.stroke();
</script>

<canvas id="lineRound" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineRound');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.strokeStyle = '#fcd209';
context.lineCap = 'round';
context.stroke();
</script>

<canvas id="lineSquare" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineSquare');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.strokeStyle = '#000';
context.lineCap = 'square';
context.stroke();
</script>

Beginners guide to HTML5 Canvas