javascript - inconsistent HTML5 canvas results -
i've got following html5 javascript:
<!doctype html> <html> <head> <style> canvas {width:200px; height:200px; border: solid blue 1px } </style> </head> <body> <canvas id="mycanvas" ></canvas> <script> var canvas, ctx, i, tlineh = 70; canvas = document.getelementbyid('mycanvas'); ctx = canvas.getcontext('2d'); for(i=0; i<50; i++){ ctx.linewidth = 1; ctx.moveto(i*3+0.5, tlineh-15); ctx.lineto(i*3+0.5, tlineh+15); ctx.stroke(); } for(i=200; i<240; i+=4){ ctx.linewidth = 2; ctx.moveto(i, tlineh-30); ctx.lineto(i, tlineh-15); ctx.stroke(); } </script> </body> </html> which produces first image. if reverse order of for loops second image drawn! , if change height of canvas 300px third image drawn!!
i post images here show happens don't have enough reputation points, i've put them @ https://www.dropbox.com/s/dun1vr4vjju3u7c/canvastests.png?dl=0
i'm hoping can explain why code produces different results when seems drawings should identical.
thanks, gerard
don't change width , height of canvas using css. in javascript, set with:
ctx.canvas.height = 200; ctx.canvas.width = 200; setting value css stretch out canvas, while setting javascript resizes it.
Comments
Post a Comment