Blurry 1x width canvas.context lines.

6thC

Hey all. Has anyone has experience with QML Context2D and lineTo?

I set my canvas context to lineWidth = 1 but is drawing lines thicker using ctx.moveTo && ctx.lineTo

It looks like anti-aliasing or something? But it's just a bunch of lines 1x pixel wide?
Is there anything I can do do have lines drawn a bit crisper?

I have tried in main.cpp with and without: QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
The line style is not gradient etc, like this:

if(canvas.available){
var ctx = canvas.getContext("2d");
var x=10;
var y=10;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";

ctx.moveTo(x,y);
ctx.lineTo(x+100,y);
ctx.stroke();
}

6thC

I've found I can get the desired look for straight lines setting the context:

antialiasing: false;

So it is undesirable straight line behavior with the context AA.
If I do this though, quite predictably, my other non-straight (previously unmentioned) curved lines become quite jaggy. Also undesirable.

Is there not a good mix / better detection and drawing of straight lines, relative to screen X, Y etc.
How come our GUIs don't AA vertical and horizontal so badly?

I suspect they do what I've just discovered and draw differently for different tasks? I've actually created a kind of workable solution but it involves 2x the work - using 2x canvases (I can't even find out if this is supported but it seems to be working):

Canvas { id:canvasAA; antialiasing: true; anchors.fill: parent; }
Canvas { id:canvas;   antialiasing:false; anchors.fill: parent; }

And I for now have just split straight lines processes without AA and curves functions into another. Now my plan was to actually move the nodes around resulting in non-straight lines... this would require me to engineer something like IsThisAStraightEdge() per frame and throw rendering to one or other canvas per frame update.

Is that what I'm looking at having to do? Does anyone else have experience with this or know of an AA setting somewhere that doesn't blur straight edges?

Prochy

I think solution of your problem is here. http://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry :) I may be wrong.

6thC

Hmm. Thanks. And Yuck :-) - I think I understand the problem now, not sure what I'm going to do as my grid is planning on moving all angles and could be positioned anywhere as it's a responsive control that can resize to whatever dimensions you fit it in.

Thanks for the info. That link there (http://diveintohtml5.info/canvas.html) does seem to be what's happening:

"For example, if you try to draw a line from (1, 0) to (1, 3), 
the browser will draw a line covering 0.5 screen pixels on either side of x=1. 
The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:"

and

"But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser
 will draw a line covering 0.5 screen pixels on either side of x=1.5, 
which results in a true 1-pixel-wide line:"