HTML5 Canvas: 1 px Line creates 2 Pixel Line with wrong Color
Question by PC Control | 2014-05-20 at 23:45
I really like the possibilities, the HTML 5 canvas element is offering! However, up to now, I have not succeeded in drawing a simple one pixel width line on my canvas.
I am using the following code:
var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 10);
context.lineTo(100, 10);
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();Although I have explicitly specified, that the line should have a width of exactly one pixel, a 2-pixel-line is drawn instead. Also the color, I have determined, only seems to be faded and not as specified.
Funnily, it is all working well when specifying another value for lineWidth. For example, I can draw a 2px line without any problems. What can I do?
Related Topics
HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics
Tutorial | 0 Comments
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 2 - Drawing Lines
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
The phenomenon you are describing is resulting from the fact that a line is always drawn on half of a pixel. If you correct your code by this half pixel, your line should be drawn normally:
When drawing on a smooth coordinate, the line is set exactly between two pixels. The result is that the line extends over the two adjacent pixels with reduced color intensity.
Of course, this problem only arises when drawing horizontal or vertical lines. Therefore, I have only set the 10 from your example to 10.5 (x-axis) and I have not changed the 0 and 100 from the y-axis.
2014-05-21 at 16:37
In addition, you can also use the function translate() to change the general behavior:
By using translate(), the coordinate system of the canvas is moved by the determined values. This means, with using translate(0.5, 0.5) the point 0/0 is moved to 0.5/0.5.
Or with other words: When starting line at 1/1, after this translate, the point would automatically be 1.5/1.5 instead - the values 0.5/0.5 are simply added to each coordinate and this makes the lines always starting at a smooth position.
Important: Calling translate() is reseted for example with changing the size of the canvas.
2014-05-22 at 16:21