Drawing lines on Canvas in HTML 5

Posted by Sunny.Sagar under HTML 5 category on | Points: 40 | Views : 1491
Using HTML 5 we can draw lines in canvas.Follow the below code for using this.
We have to write java script code and Normal HTML code, both the code combination works and shows the output of canvas line .
Code :
<canvas id="Canvas1" width="400" height="300" style="border:2px solid green;"> 
Canvas is not supported in your browser
<br />
<input type="button" onclick="DrawLines()" value="Draw Line" />

Java Script Code :

<script type="text/javascript">
function DrawLines() {

// alert(Modernizr.canvas);

var context = document.getElementById("Canvas1").getContext("2d");

context.moveTo(40, 50);
context.lineTo(40, 80);
context.lineTo(300, 200);
context.lineTo(200, 50);
context.lineTo(80, 35);
context.closePath(); // optional

Comments or Responses

Login to post response