HTML5 Game - Using Translation to Create a Diagonal Line on a Canvas

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

Description

Using Translation to Create a Diagonal Line on a Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <title>Translated diagonal line example</title>

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

            // Save a copy of the current drawing state
            context.save();//from   ww w  .  j a  v  a 2s  . c  o  m

            // Move the drawing context to the right, and down
            context.translate(70, 140);

            // Draw the same line as before, but using the origin as a start
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            // Restore the old drawing state
            context.restore();
        }

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

Related Topic