Next »
1040/1956
« Previous

Draw a line on HTML5 canvas in JavaScript

Description

The following code shows how to draw a line on HTML5 canvas.

Example


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!--from   www.  ja  v  a 2s. c  o  m-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// set the line width to 10 pixels
context.lineWidth = 10;
// set the line color to blue
context.strokeStyle = "blue";
// position the drawing cursor
context.moveTo(50, canvas.height - 50);
// draw the line
context.lineTo(canvas.width - 50, 50);
// make the line visibile with the stroke color
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>

Click to view the demo

The code above generates the following result.

Draw a line on HTML5 canvas in JavaScript
Next »
« Previous