HTML5 Game - Begin new path for each line drawing

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

Description

Begin new path for each line drawing

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lines</title>

  <style>
canvas {/*from  ww w  .j  a va2 s  .  c  o m*/
  border: 1px dashed black;
}
  </style>

  <script>
 
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  context.lineWidth = 20;
  context.strokeStyle = "rgb(205,40,40)";

  context.moveTo(10,50);
  context.lineTo(400,50);
  context.lineCap = "butt";
  context.stroke();

  context.beginPath();
  context.moveTo(10,120);
  context.lineTo(400,120);
  context.lineCap = "round";
  context.stroke();

  context.beginPath();
  context.moveTo(10,190);
  context.lineTo(400,190);
  context.lineCap = "square";
  context.stroke();
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

Related Topic