How can i improve my Html5 Canvas pathing Quality?

Question

I have been writing a little javascript plugin, and i am having a little trouble with improving the canvas overall quality of the render. I have searched over the web here a

Answer 1

What is a slanted line on a pixel matrix is what you should understand. If you need to draw a slanted line of a single pixel width, there is no way you can prevent it from having jagged edges on it since slanting is achieved via a progressing vertical pattern of horizontal lines.

The solution is to have some blur effect around the lines and make the line joining smoother.

You need to use shadowColor, shadowBlur, lineCap and lineJoin properties of the canvas context to achieve this.

Put the following setup and try drawing you lines.

 for (i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");

    ctx.shadowColor = "rgba(0,0,0,1)";
    ctx.shadowBlur = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';

    ctx.clearRect(0,0, canvas.width, canvas.height);

  }

Here is the result

Try playing with the shadowColor opacity and the blur size together with the line width and color. You can get pretty amazing results.

On a side note, your project sounds more SVG to me than Canvas. Probably you should think of moving to SVG to get better drawing support and performance.

Update

Here is a fine adjustment

ctx.shadowColor = "rgba(128,128,128,.2)";
ctx.shadowBlur = 1;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 1;
ctx.strokeStyle = 'gray';