topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-canvas-example-draw-alpha.htm / htm



  <script type=text/javascript>
  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    // draw background
    ctx.fillStyle = '#FD0';
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = '#6C0';
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = '#09F';
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = '#F30';
    ctx.fillRect(75,75,150,150);
    ctx.fillStyle = '#FFF';
  
    // set transparency value
    ctx.globalAlpha = 0.2;
  
    // Draw semi transparent circles
    for (i=0;i<7;i++){
        ctx.beginPath();
        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
        ctx.fill();
    }
  }
  
  </script>
  <body onload="draw();">
  <canvas id="canvas" width="200" height="200"></canvas>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.