Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I actually did the same thing:</p> <pre><code>ctx.beginPath(); ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position. ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call. ctx.stroke(); </code></pre> <p>Bezier Curves are great for pen-like (paths) functionality, but I've ended up with unintended results with that as well, namely the curve between P0 and P2 being too distant from P1... This can be handled by adding extra points against which to evaluate the function (taking it to higher degrees, which seems to be how adobe does it).</p> <p>I've spent two days answering this question, doing a lot of research of the best examples, tearing through code where available. There are essentially two responses:</p> <p>1.) Apply a filter – a box- or gaussian- blur will smooth the rough edges a little, making it look less angular.</p> <p>2.) Apply a Bezier Curve – Between the <code>mousedown</code> and <code>mouseup</code> events, log an array of the points and apply the curve. The longer the line, the slower the re-rendering.(<a href="http://muro.deviantart.com/" rel="nofollow">Muro</a> - deviantArt's canvas app appears to do this). [NB: If the idea is to create an artistic web app for people to draw on, show them the original line until the smooth rendering is complete.]</p> <p>I like somewhere in between, personally. A slight blur tends to soften things, especially near corners, and makes slowly placed (thus frequent, shorter lines) much softer).</p> <p>Something I'll add, which may be completely obvious so I apologize: Make sure you've set your cap style to 'round' –– <code>ctx.lineCap = 'round'</code></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload