HTML5 Game - Draw a straight line

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Line

Description

Draw a straight line

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas drawing API - straight line</title>
<link rel="stylesheet" href="style.css">
</head>//from  w  ww  . j  a va  2s.com
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 

context.strokeStyle = '#0000ff';
context.lineWidth = 2;
context.beginPath() ;
context.moveTo(50, 100);
context.lineTo(250, 400);
context.stroke();
  
  </script>
</body>
</html>

Related Topic