Canvas Basic (Draw a single line) Part 01 HTML5


Canvas’s default width = 300px and height = 150px, it has no default border, but we can add border just like CSS.

Draw a single line using canvas :

Add jquery library :

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js“></script>

Declare canvas in HTML body :
<canvas id=”exampleCanvas” width=”500″ height=”300″ style=”border:1px solid #000;”></canvas>

JQuery Code :
var context = $(“#exampleCanvas”)[0].getContext(“2d”);
context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.stroke();

Output :


Leave a Reply