How to draw points in x/y positions using JavaScript

Question

I would like to plot points in two dimensional fashion (each have an x and y coordinates). I was wondering if you know of a library or project that does this so that I don't have to build this from scratch.

Answer 1

Using the canvas tag is the best way of doing this. Here is an example that creates a Canvas:

// Create a canvas that extends the entire screen
// and it will draw right over the other html elements, like buttons, etc
var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("style", "position: absolute; x:0; y:0;");
document.body.appendChild(canvas);

//Then you can draw a point at (10,10) like this:

var ctx = canvas.getContext("2d");
ctx.fillRect(10,10,1,1);

Furthermore, you can manipulate all the pixels on the screen using ImageData.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

Answer 2

Here you have one:

https://github.com/sameerb/jsDraw2D

Edit: I've updated the link I had posted before