Question

I have what I feel should be a simple question. I have been trying to search for it for a while but everything I find is more complex than what I need. So here is my question. How can I draw a simple line on an HTML canvas using jQuery?

<canvas id="canvas">
<!-- I want jQuery to draw a line here -->
</canvas>


$(document).ready(function() {
   //I would like the line to draw when the document loads.
});

Note.. I am not looking for it to draw or show a drawing motion or anything like that. Basically I just want to be able to load the page and have a line appear. My end goal is eventually draw 3d objects. But before I can do that I first need to know how to do the basics… (IE) Draw a line.

Thanks in advance

Answer 1

Here’s how to do it in Javascript (you can simply insert this inside your function but the script will work fine in a script tag without JQuery, and that’s probably best). Example:

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(150,40);
ctx.stroke();

If you want to get heavy, it’s hard to better the Javascript libraries Raphaël and D3.