<!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>
0 Comments