HTML5 Canvas implements drawing a pixel-wide thin line

Draw a pixel-wide thin line. When using HTML5 Canvas to implement it, pay special attention to ensure that all your coordinate points are integers. Otherwise, HTML5 will automatically implement edge anti-aliasing. Interested friends can take a look at the rendering

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 width of one pixel

It feels so thick, like often seen The various drawing line effects of the web version are very different. Could it be that HTML5 Canvas didn't expect to do it better?

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

It is drawn from 0 to 1 instead of from 0.5 to 1 0 to 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; 
};

The center translation method 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();

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

, which will cause your one pixel straight line to look thicker.

Running effect:

How is the effect now? This is a little trick for HTML5 Canvas line drawing.
If you think it is good, please give it a thumbs up.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

html5 Canvas implementation of drawing unclosed paths and gradient color filling methods

html5 Canvas implementation Draw straight lines and set line styles

The above is the detailed content of HTML5 Canvas implements drawing a pixel-wide thin line. For more information, please follow other related articles on the PHP Chinese website!