Search code examples
htmlcanvas

Drawing a dot on HTML5 canvas

Drawing a line on the HTML5 canvas is quite straightforward using the context.moveTo() and context.lineTo() functions.

I'm not quite sure if it's possible to draw a dot i.e. color a single pixel. The lineTo function wont draw a single pixel line (obviously).

Is there a method to do this?

Solution

  • For performance reasons, don't draw a circle if you can avoid it. Just draw a rectangle with a width and height of one:

    ctx.fillRect(10,10,1,1); // fill in the pixel at (10,10)