HTML5 Game - Creating a Diagonal Line on a Canvas

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

Description

Creating a Diagonal Line on a Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <title>Diagonal line example</title>

  <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
  <script>
        function drawDiagonal() {
            // Get the canvas element and its drawing context
            let canvas = document.getElementById('diagonal');
            let context = canvas.getContext('2d');

            // Create a path in absolute coordinates
            context.beginPath();//from  ww  w.  j  a  va 2  s.  c  o m
            context.moveTo(70, 140);
            context.lineTo(140, 70);

            // Stroke the line onto the canvas
            context.stroke();
        }

        window.addEventListener("load", drawDiagonal, true);
  </script>
</html>

Related Topic