How to draw points in x/y positions using JavaScript

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


Here you have one:

https://github.com/sameerb/jsDraw2D

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


Raphaël - a small JavaScript library that should simplify your work with vector graphics on the web.

Tags:

Javascript

Recent Posts