javascript - How can I draw a circle on a canvas? -


i'm using javascript , canvas draw mathematically designed scale (for measuring torque, includes newton-meters , foot-pounds). had been positioning ticks using trigonometry, , drawing arcing lines using arc, naturally. problem came when needed line up, there strange distortion. drew large circle , compared circular selection in gimp , there distortion. circles consistent every 45 degrees around circles, between nodes canvas drawn circle deviates outwards, octagon can been rounded far outwards approximate circle.

why these distortions occur? how can draw circular circle on canvas?

this code used generate distorted circle.

<!doctype html> <html>   <body>     <canvas width=8000 height=8000 id='mycanvas'></canvas>     <script>       var canvas = document.getelementbyid('mycanvas');       var context = canvas.getcontext('2d');       context.beginpath();       context.arc(4000, 4000, 3200, 0, math.pi*2, false);       context.linewidth = 1;       context.strokestyle = '#ff0000';       context.linecap = 'square';       context.stroke();     </script>   </body> </html>

this may not minimal, know not of relevance of context.linecap, it's vestige of code based on. following screenshot shows difference between circle drawn gimp , circle drawn chrome screenshot

this chromium bug #164241 (declared fixed, although fix may not have made out yet). short answer is: chrome approximating circles composite bezier curves.

i unable replicate myself on chromium (43.0.2357.130, ubuntu) occur on firefox 39, although couldn't find similar bug report firefox. fact it's correct every 90 degrees (not 45, @ least not me) indicates circles being approximated 4 curves, curve endpoints guaranteed correct.

luckily there's simple workaround: create path consisting of more 4 curves. 8 or 6 should sufficient radii you're using can use more if want play safe. or increase number of curves function of radius, although calculating optimal function (the minimum n produce accurate circle given radius r) non-trivial.

context.beginpath(); var n=8; // 4 default behaviour. higher better, slower (var i=0; i<n; i++) {     context.arc(4000, 4000, 3200, math.pi*2*i/n, math.pi*2*(i+1)/n, false); } context.stroke();

see this question.

(and yes, linecap red herring.)


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more