Tips for drawing ellipses in html5 canvas and keeping the line thickness uniform_html5 tutorial tips

Drawing ellipses in Canvas is a very common requirement. The relatively new HTML Canvas 2D Context W3C draft has added the ellipse method to draw ellipses. However, most browsers have not yet implemented this method, so you need to use arc or arcTo. Method combines scale deformation to draw ellipses.

Sample code:

Copy code

The code is as follows:

<script> <br>var ctx = documentquerySelector('canvas')getContext('2d'); <br>ctxlineWidth = "10 "; <br>ctxscale(1,2); <br>ctxarc(150,150,100,0,MathPI*2,false); <br>ctxstroke(); <br></script>

Something is wrong because the line thickness is uneven and the stroke is also affected by scale.

To fix this problem, you need a little trick.

Sample code:

Copy code

The code is as follows:

[code]

<script> <br>var ctx = documentquerySelector('canvas')getContext('2d'); <br>ctxlineWidth = "10"; <br>ctxsave(); <br>ctxscale(1,2); <br>ctxarc(150,150,100,0,MathPI*2,false); <br>ctxrestore(); <br>ctxstroke(); <br></script>

[/code]
Now it’s even and perfect.

The trick is to save the canvas state first, then zoom and call the path command, then restore to restore the canvas state, and then stroke to draw it.

The key point is to save first and then scale, and restore first and then stroke.