# js_transparency.py

# js_transparency.py

import tempfile
import webbrowser
import os

js_data = '''<!DOCTYPE html>
<html>
<head>
<title>HTML5 transparency</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = '#FD0';
        ctx.fillRect(0, 0, 100, 100);
        ctx.fillStyle = '#6C0';
        ctx.fillRect(100, 0, 100, 100);
        ctx.fillStyle = '#09F';
        ctx.fillRect(0, 100, 100, 100);
        ctx.fillStyle = '#F30';
        ctx.fillRect(100, 100, 100, 100);
        ctx.fillStyle = '#FFF';

        // set transparency value
        ctx.globalAlpha = 0.2;

        // Draw semi transparent circles
        for (var i = 0; i < 9; i++) {
            ctx.beginPath();
            ctx.arc(100, 100, 10 + 10 * i, 0, Math.PI * 2, true);
            ctx.fill();
        }
    }
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="450" height="350">
    </canvas>
</body>
</html>
'''

chrome_path = 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe %s'

tf = tempfile.mktemp(".html", "JSdemo_")
print tf
with open(tf, 'w') as temp:
    temp.write(js_data)
webbrowser.get(chrome_path).open(tf)
os.remove(tf)