Drawing on the HTML5 Canvas with JavaScript

Much of the guidance on this page was first published under the title Getting Started with a Canvas in HTML5. You can compare the Smart Pascal version of the code to draw a green triangle with black edges with the HTML5/JavaScript below:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canv" width="200" height="200"></canvas>
    <script>
      var c=document.getElementById("canv");
      var context=c.getContext("2d");
      context.fillStyle='green';
      context.strokeStyle='black';
      context.beginPath();
      context.moveTo(50, 50);
      context.lineTo(50, 100);
      context.lineTo(100, 50);
      context.lineTo(50, 50);
      context.closePath();
      context.fill();
      context.stroke();
    </script> 
  </body>
</html>

You will see that a knowledge of graphics in Smart Pascal will enable you to make rapid progress with using JavaScript to draw on a canvas.

If you want to put the JavaScript in an external file, copy the lines between the script tags to a new file and save it as triangle.js. Make sure that it ends with a new line. You can then call it as follows:

<!DOCTYPE html>
<html> 
  <body>
    <canvas id = "canv" width = "200" height = "200"></canvas> 
    <script type = "text/javascript" src = "triangle.js"></script>
  </body>
</html>
Programming - a skill for life!

How to apply your knowledge of Pascal when learning JavaScript