rgba fillStyle with alpha does not get fully opaque if applied multiple times - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

rgba fillStyle with alpha does not get fully opaque if applied multiple times

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*w  w w .ja v a2  s  . c o m*/
$(function () {
    var canvas = $("#mycanvas"),
        ctx = canvas[0].getContext("2d"),
        imgUrl = "https://www.java2s.com/style/demo/Google-Chrome.png";
    canvas[0].width=1000;
    canvas[0].height=1000;
    var alpha = 1;
    var image = new Image();
    image.src = imgUrl ;
    ctx.globalAlpha = alpha;
    $(image).load(function() {
        ctx.drawImage(image, 0, 0, 256, 256);
        draw();
    });
    function draw() {
        ctx.globalAlpha = 1.0;
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillRect(0,0,canvas.width(),canvas.height());
        alpha -= 0.1;
        if (alpha < 0) alpha = 0;
        ctx.globalAlpha = alpha;
        console.log(alpha);
        ctx.drawImage(image, 0, 0, 256, 256);
        setTimeout(draw, 100);
    }
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="mycanvas"></canvas>  
   </body>
</html>

Related Tutorials