Drawing a dot on HTML5 canvas

html

responsive-design

performance

best-practices

byAlex Kataev·Oct 22, 2024

To create a quick dot on your HTML5 canvas, use the arc() method with a radius of 1:

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = '#000'; // Our dot's color, black like my coffee
ctx.beginPath();
ctx.arc(x, y, 1, 0, 2 * Math.PI); // x, y are your canvas coordinates
ctx.fill();

Remember to replace x and y with the actual coordinates where you want your dot.

Efficient pixel drawing

The fillRect() method is another way to get a single pixel or dot:

ctx.fillRect(x, y, 1, 1); // Quick and efficient dot at (x, y)

This is like using a fine-point pen instead of a brush, when dealing with many pixels.

Direct pixel control

For experts or pixel manipulators, getImageData and putImageData provide more authority over individual pixels:

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var index = (x + y * imgData.width) * 4; // The "where's Waldo" of pixel location
imgData.data[index+0] = r; // Here comes the red
imgData.data[index+1] = g; // Get your greens
imgData.data[index+2] = b; // Feeling blue
imgData.data[index+3] = a; // Alpha, the ghost factor
ctx.putImageData(imgData, 0, 0);

Caution: Always profile your code. Speeds may exceed comfort levels.

Pixel drawing hacks

If you'd like to make pixel drawing ~~harder~~ more interesting, you might resort to beginPath(), moveTo(), and lineTo():

ctx.beginPath();
ctx.moveTo(x + 0.5, y + 0.5); // Add a little oomph to your position
ctx.lineTo(x + 0.5, y + 0.5); // Draw, you pixel cowboy
ctx.stroke(); // The grand reveal

That 0.5 offset? It's not your glasses. It's to perfect pixel alignment in most browsers.

Choosing the best pixel painter

While a box of crayons gives you choices, your scenario dictates the best:

fillRect for uniform and bulk pixel coloring.
Direct manipulation when granual control is the king.
Quality over speed? Choose the method that keeps the image consistent.

The artistic side of arc

While fillRect is swift, arc() has its aesthetic charm:

bigger, visible dots become art with arc().
Stand-out dots against shapes, then thank arc().
In a world of animated canvases, arc() can grow or shrink naturally.

Edge trap

When drawing close to the edge of the canvas, ensure:

Dots stay within bounds.
Adjust positions to avoid dot clipping. Nobody likes a half-baked dot.

Performance vs Quality

While each method shines in different lights, balancing performance and quality is key:

fillRect for a quick static canvas.
Profile different methods for dynamic environments.
Draw a large scale? Separate UI and rendering using web workers or offscreen canvas.