# js_putImageData.py

# js_putImageData.py

import tempfile
import webbrowser
import os

js_data = '''<!DOCTYPE html>
<html>
    <head>
    <title>HTML5 putImageData</title>
    </head>
    <body>
        <canvas id="myCanvas" width="1200" height="800"
                        style="border:0px">
        </canvas>
        <script>
            setInterval(function() {
                var canvas = document.getElementById('myCanvas'),
                    ctx = canvas.getContext('2d');
                var rectData = ctx.getImageData(10, 10, 1200, 800);
                for (var y=0; y<800; y++) {
                    for (var x=0; x<1200; x++) {
                        const offset = 4*(y*800+x);// 4* because each pixel is 4 bytes
                        rectData.data[offset+0] = Math.floor(Math.random() * 256);// red
                        rectData.data[offset+1] = Math.floor(Math.random() * 256);// green
                        rectData.data[offset+2] = Math.floor(Math.random() * 256);// blue
                        rectData.data[offset+3] = 255;// alpha, fully opaque
                    }
                }
                ctx.putImageData(rectData, 10, 10);
            }, 0)

        </script>
    </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)