Drawing with Pixi.js

[iclutcha]

I want to create a web app that will allow you to draw pictures. I have tried using PIXI's graphics library and it sort of works, but there are some issues. I was attempting to use LineTo which basically draws a line between two points. The issue I have come across is if I increase the line thickness, any rotation causes gaps and weird edges.

 

I have also tried creating circles instead of lines. For slow movements this looks great, but with quick mouse swipes, there are gaps between the circles.

 

Does anyone know of a better way to code this using PIXI? Maybe PIXI is not the best library for this sort of thing?

 

Let me know if you need more details. I have attached a screenshot showing the problem I am experiencing.

 

Thanks!

[iclutcha]

Hi All,

 

I have fixed the issue I was having with the lines. Now they are all connected and look a lot better. The issue I am having now is that the lines look relatively jagged. I have tried enabling AA where I created the renderer, but I can not see any difference.

 

Is there another way to enable anti-aliasing or a better way to smooth out the lines and circles?

 

I heard there is a way to render the graphics larger and then scale them down, but I am not quite sure about that.

 

If anyone can help with this, I would greatly appreciate it.

 

Thanks!

[d13]

I have fixed the issue I was having with the lines. Now they are all connected and look a lot better. 

Hello.. how did you end up connecting the points?

Would you need to compare the position of two points, get the angle between the first and second, and then draw a curved lined between them?

[tsphillips]

Try drawing on the Canvas (with the Context) using bezier curves (context.bezierCurveTo).  This should give you nice smooth curves between the points.  For example:

http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/

http://www.sitepoint.com/html5-canvas-draw-bezier-curves/

 

Tom