Code details for drawing a pixel-wide thin line in HTML5 Canvas

The following code in the orthodox HTML5 Canvas

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();

The running result is not a line with a pixel width

It feels so thick. It is very different from the various drawing line effects often seen on the web version

. Is it true that HTML5 Canvas I didn’t expect it to be better

In fact, the fundamental reason is that the drawing of Canvas does not start from the middle

but from 0 to 1. It is not drawn from 0.5~1 + 0~0.5, so

causes the fade to be at the edge and the line looks very wide.

There are two solutions, one is the dislocation coverage method, and the other is the center

translation (0.5,0.5). The implementation code is as follows:

Dislocation coverage method I have packaged it into a function of the original context

/**
 * <p> draw one pixel line </p>
 * @param fromX
 * @param formY
 * @param toX
 * @param toY
 * @param backgroundColor - default is white
 * @param vertical - boolean
 */
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
	var currentStrokeStyle = this.strokeStyle;
	this.beginPath();
	this.moveTo(fromX, fromY);
	this.lineTo(toX, toY);
	this.closePath();
	this.lineWidth=2;
	this.stroke();
	this.beginPath();
	if(vertical) {
		this.moveTo(fromX+1, fromY);
		this.lineTo(toX+1, toY);
	} else {
		this.moveTo(fromX, fromY+1);
		this.lineTo(toX, toY+1);
	}
	this.closePath();
	this.lineWidth=2;
	this.strokeStyle=backgroundColor;
	this.stroke();
	this.strokeStyle = currentStrokeStyle;
};

Center translation method The code is as follows:

	ctx.save();
	ctx.translate(0.5,0.5);
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(10, 100);
	ctx.lineTo(300,100);
	ctx.stroke();
	ctx.restore();

Pay special attention to ensure that all your coordinate points are integers, otherwise HTML5 will automatically implement edge anti-aliasing

It also causes one of your pixel straight lines to look thicker.

Running effect:

What is the effect now? This is HTML5 Canvas line drawing A little trick

If you think it’s good, please give it a thumbs up.

The above is the code details for drawing a pixel-wide thin line in HTML5 Canvas. For more related content, please pay attention to the PHP Chinese website (www .php.cn)!