HTML5 canvas line width less that 1 pixel

Question

Is there any way to draw a rectangle whose composing lines have width thinner than 1 pixel?

This code works perfectly, as expected:

// context is a HTML5 canvas 2D context
context.lineWidth = 1;
context.strokeStyle = "black";
context.rect(0, 0, 20, 20);
context.stroke();

It draws a nice rectangle.

But, if I try to draw a rectangle with thinner lines:

// See line width
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.rect(0, 0, 20, 20);
context.stroke();

It still draws a rectangle whose borders have 1 pixel width.

I'm dealing with the canvas object here, and not CSS, where you have ways to "simulate" this.

Answer 1

Although it doesn't make much sense, you can acheive that with using a regular 1-pixel line with a 50% scaled canvas (but again it's a 1-pixel rendition, read below). See this snippet:

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

function scale() {
  context.scale(0.5, 0.5);
  draw();
}

function draw() {
  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(450, 50);
  context.stroke();
}

draw()

<canvas width="400" height="150"></canvas>
<button onclick="scale()">Scale down</button>

---

But again, I wonder how you expect the half-pixel line to look on your screen, antialiasing?

Right :) I suppose I was thinking on some way of drawing thinner lines, like, for example, when you use CSS styles. I've looked around and I don't think I can use alternate units.

There's no way to make something that's smaller than the smallest component unit, in our case a pixel. You can mimic the thinner look by transparency, or opacity, or even some sort of antialiasing (which again relies on transparency or the colouring of the neighbouring pixels), but not by trying to go below one pixel.

I agree, there is a sub-pixel rendering mode in browsers, for example, when you work with percentages, but in the end, the browser just renders full pixels with some of the modification I've described above.

---

And you know if you could render unit smaller than pixels, you'd technically have infinite resolutions on displays. I wish it was possible. :)