CODEWITHSUNDEEP
htmlcanvas
Neir0
Neir0

Reputation: 13377

Draw single pixel line in html5 canvas

When i try to draw single pixel black line with the following code:

    context.strokeStyle = '#000'; 
    context.beginPath();
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();

I have more then one pixel line with gray border. How to fix it?

Here is an example http://jsfiddle.net/z4VJq/

Upvotes: 21

Views: 23240

Answers (2)

Pete Pearl
Pete Pearl

Reputation: 341

You have to use context.translate(.5,.5); to offset everything by half a pixel. Its easy way for fix your problem

var canvas = document.getElementById("canvas1");
var context1 = canvas.getContext('2d');
context1.strokeStyle = '#000'; 
context1.beginPath();
context1.moveTo(10, 5); 
context1.lineTo(300, 5);
context1.stroke();

var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext('2d');
context2.translate(.5,.5);
context2.strokeStyle = '#000'; 
context2.beginPath();
context2.moveTo(10, 5); 
context2.lineTo(300, 5);
context2.stroke();
<div><canvas height='10' width='300' id='canvas1'>Обновите браузер</canvas></div>
<div><canvas height='10' width='300' id='canvas2'>Обновите браузер</canvas></div>

Upvotes: 1

Jonas
Jonas

Reputation: 129075

Call your function with these coordinates instead: drawLine(30,30.5,300,30.5);. Try it in jsFiddle.

The problem is that your color will be at an edge, so the color will be halfway in the pixel above the edge and halfway below the edge. If you set the position of the line in the middle of an integer, it will be drawn within a pixel line.

This picture (from the linked article below) illustrates it:

enter image description here

You can read more about this on Canvas tutorial: A lineWidth example.

Upvotes: 63

Related Questions