Jump to content
  • Advertisement
Sign in to follow this  
Concentrate

Html5 Canvas: Why in the following JSFiddle, the stroke rectangle full opacity value is 128 instead of 255?

This topic is 1871 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Here is the http://jsfiddle.net/DV9Bw/558/ . I'm not sure why there is opacity less than 255. If you hover over the non-overlapping section, you can see that the opacity is 127/128. Can someone clear this up for me? Why isn't opacity full (255). Also more importantly, why in the overlapping section, the two rectangle pixels are combined, instead of the destination rectangle(blue one I believe) completely take over the pixel at that coordinate? Is this just how the strokeRectangle works? If I change the stroke to fill, as in fillRectangle, then everything works as expected. Any help is greatly appreciated!

Share this post


Link to post
Share on other sites
Advertisement

It appears that it is your line width and the canvas seems to be off by half a pixel. When the width is increased to 2 the lines draw solid.

 

When the first two parameters of strokeRect are increased by 0.5 the lines draw correctly.

Share this post


Link to post
Share on other sites

Interesting, this seems like a bug? Same result in chrome/firefox as well. Btw, on chrome increasing linewidth by 2, seems to fix the issue as you've mentioned.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!