Drawing lines using the HTML5 canvas

This tutorial explains how to use the HTML5 canvas element to draw lines. The line that will be drawn will be inside a canvas with a  grey border. It will look like this:

Screen Shot 2015-05-04 at 8.51.12 pm

Watch the video below to see how to draw lines and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Drawing lines on canvas</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.moveTo(0,0);
 ctx.lineTo(200,100);
 ctx.strokeStyle="#FF0000";
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="200" height="100">
</body>
</html>

Next tutorial: Styling lines on the canvas