javascript - HTML5 Canvas — Line too thick -

-

these past 2 days i've been playing around html5 canvas element. i'm attempting draw maze, i'm @ stand-still. line drew isn't consistent linewidth property. it's ~2px thicker.

i'm familiar half pixel problem canvas element, , need start @ 0.5, don't know need put 0.5 in code.

if i'm not mistaken, if want make vertical line consistent, x argument needs .5 , horizontal line, y value needs .5?

enter image description here

    var canvas = document.getelementbyid("c"),     c = canvas.getcontext("2d"),     w = canvas.width,     h = canvas.height,     hallwaywidth = w * 0.10; /*18px*/  c.beginpath(); c.linewidth = 4; c.moveto(0, 0); c.lineto(w / 3, 0); c.moveto(0, 0); c.lineto(0, h); c.moveto(w, 0); c.lineto(w, h); c.moveto(w / 3 + hallwaywidth, 0); c.lineto(w, 0); c.moveto(0, h); c.lineto(w / 2, h); c.moveto(w / 2 + hallwaywidth, h); c.lineto(w, h);  /*code thick line*/ c.moveto(hallwaywidth, 0); c.lineto(hallwaywidth, w / 3);  c.stroke();

here's link code

you don't need use 0.5 , when linewidth 4 must use:

  • 2 instead of 0
  • (w-2) instead of w
  • (h-2) instead of h

var canvas = document.getelementbyid("c"),  	    c = canvas.getcontext("2d"),  	    w = canvas.width,  	    h = canvas.height,  	    hallwaywidth = w * 0.10, /*18px*/          l = 2;    	c.beginpath();  	c.linewidth = l*2;  	c.moveto(l,l);  	c.lineto(w / 3, l);  	c.moveto(l, l);  	c.lineto(l, h-l);  	c.moveto(w-l, l);  	c.lineto(w-l, h-l);  	c.moveto(w / 3 + hallwaywidth, l);  	c.lineto(w-l, l);  	c.moveto(l, h-l);  	c.lineto(w / 2, h-l);  	c.moveto(w / 2 + hallwaywidth, h-l);  	c.lineto(w-l, h-l);        /*code thick line*/        	c.moveto(hallwaywidth, l);      c.lineto(hallwaywidth, w / 3);    	c.stroke();
canvas {      display: block;      margin: 0 auto;      margin-top: 50px;      /* border: 1px solid red; */      background:red;  }
<canvas id="c" width="200" height="200"></canvas>

another option(to avoid "lost pixels" in corners):draw 2 different paths , use "border" linewidth of 8

var canvas = document.getelementbyid("c"),    c = canvas.getcontext("2d"),    w = canvas.width,    h = canvas.height,    hallwaywidth = w * 0.10; /*18px*/    c.beginpath();  c.linewidth = 8;  c.moveto(0, 0);  c.lineto(w / 3, 0);  c.moveto(0, 0);  c.lineto(0, h);  c.moveto(w, 0);  c.lineto(w, h);  c.moveto(w / 3 + hallwaywidth, 0);  c.lineto(w, 0);  c.moveto(0, h);  c.lineto(w / 2, h);  c.moveto(w / 2 + hallwaywidth, h);  c.lineto(w, h);  c.stroke();  /*code thick line*/  c.beginpath();  c.linewidth = 4;  c.moveto(hallwaywidth, 0);  c.lineto(hallwaywidth, w / 3);  c.stroke();
canvas {    display: block;    margin: 0 auto;    margin-top: 50px;    /* border: 1px solid red; */    background: red;  }
<canvas id="c" width="200" height="200"></canvas>


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana
Read more

php - How do you embed a video into a custom theme on WordPress? -

-
i'm using wordpress 4.2.3 , created custom theme use. when try embed youtube video (pasting http:// link content area), video shows in edit content area, when view site, shows text url instead. i tried sorts of things clear formatting, removing link, unchecking settings in writing area, etc. temporarily switched default wp theme , video shows up, i'm missing in template code, , can't figure out what. here code used outputting content in template. index.php <div class="video"> <?php $post_id = 26; $queried_post = get_post($post_id); echo $queried_post->post_content; ?> </div> thanks - appreciate it!
Read more