<!DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas</h1>

<h2>Different Line Patterns</h2>

<canvas id="gameCanvas" width="500" height="500" style="border:1px solid grey"></canvas>

<script>

const canvas = document.getElementById('gameCanvas');

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

context.beginPath(); //starting new shape

context.lineWidth = 3; // width of the line

context.strokeStyle = 'red'; // color of the line

context.moveTo(50, 50); //starting point of the line

context.lineTo(200,50); // ending point of the line

context.stroke(); // actually draws the line on canvas

context.beginPath();

context.lineWidth = 8;

context.strokeStyle = 'blue'; // Set the stroke color

context.moveTo(50, 80);

context.lineTo(300, 80);

context.stroke();

context.beginPath();

context.lineWidth = 4;

context.strokeStyle = 'green'; // Set the stroke(line) color

context.arc(100, 100, 50, 0, Math.PI,false); // x=100, y=100, radius=50, semi circle

context.stroke();

context.beginPath();

context.lineWidth = 5;

context.strokeStyle = 'orange'; // Set the stroke color

context.arc(100, 200, 50, 0, Math.PI,true);

context.stroke();

context.beginPath();

context.arc(100, 300, 50, 0, 2* Math.PI);

context.lineWidth = 6;

context.strokeStyle = 'pink';

context.stroke();

</script>

</body>

</html>