# js_putImageData2.py

# js_putImageData2.py

import tempfile
import webbrowser
import os

'''
Colors, Styles, and Shadows
Property                            Description
ctx.fillStyle                       Sets or returns the color, gradient, or pattern used to fill the drawing
ctx.strokeStyle                     Sets or returns the color, gradient, or pattern used for strokes
ctx.shadowColor                     Sets or returns the color to use for shadows
ctx.shadowBlur                      Sets or returns the blur level for shadows
ctx.shadowOffsetX                   Sets or returns the horizontal distance of the shadow from the shape
ctx.shadowOffsetY                   Sets or returns the vertical distance of the shadow from the shape

Method                              Description
ctx.createLinearGradient()          Creates a linear gradient (to use on canvas content)
ctx.createPattern()                 Repeats a specified element in the specified direction
ctx.createRadialGradient()          Creates a radial/circular gradient (to use on canvas content)
ctx.addColorStop()                  Specifies the colors and stop positions in a gradient object

Line Styles
Property                            Description
ctx.lineCap                         Sets or returns the style of the end caps for a line
ctx.lineJoin                        Sets or returns the type of corner created, when two lines meet
ctx.lineWidth                       Sets or returns the current line width
ctx.miterLimit                      Sets or returns the maximum miter length

Rectangles
Method                              Description
ctx.rect()                          Creates a rectangle
ctx.fillRect()                      Draws a "filled" rectangle
ctx.strokeRect()                    Draws a rectangle (no fill)
ctx.clearRect()                     Clears the specified pixels within a given rectangle

Paths
Method                              Description
ctx.fill()                          Fills the current drawing (path)
ctx.stroke()                        Actually draws the path you have defined
ctx.beginPath()                     Begins a path, or resets the current path
ctx.moveTo()                        Moves the path to the specified point in the canvas, without creating a line
ctx.closePath()                     Creates a path from the current point back to the starting point
ctx.lineTo()                        Adds a new point and creates a line to that point from the last specified point in the canvas
ctx.clip()                          Clips a region of any shape and size from the original canvas
ctx.quadraticCurveTo()              Creates a quadratic Bezier curve
ctx.bezierCurveTo()                 Creates a cubic Bezier curve
ctx.arc()                           Creates an arc/curve (used to create circles, or parts of circles)
ctx.arcTo()                         Creates an arc/curve between two tangents
ctx.isPointInPath()                 Returns true if the specified point is in the current path, otherwise false

Transformations
Method                              Description
ctx.scale()                         Scales the current drawing bigger or smaller
ctx.rotate()                        Rotates the current drawing
ctx.translate()                     Remaps the (0,0) position on the canvas
ctx.transform()                     Replaces the current transformation matrix for the drawing
ctx.setTransform()                  Resets the current transform to the identity matrix. Then runs transform()

Text
Property                            Description
ctx.font                            Sets or returns the current font properties for text content
ctx.textAlign                       Sets or returns the current alignment for text content
ctx.textBaseline                    Sets or returns the current text baseline used when drawing text

Method                              Description
ctx.fillText()                      Draws "filled" text on the canvas
ctx.strokeText()                    Draws text on the canvas (no fill)
ctx.measureText()                   Returns an object that contains the width of the specified text

Image Drawing
Method                              Description
ctx.drawImage()                     Draws an image, canvas, or video onto the canvas

Pixel Manipulation
Property                            Description
ctx.width                           Returns the width of an ImageData object
ctx.height                          Returns the height of an ImageData object
ctx.data                            Returns an object that contains image data of a specified ImageData object

Method                              Description
ctx.createImageData()               Creates a new, blank ImageData object
ctx.getImageData()                  Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
ctx.putImageData()                  Puts the image data (from a specified ImageData object) back onto the canvas

Compositing
Property                            Description
ctx.globalAlpha                     Sets or returns the current alpha or transparency value of the drawing
ctx.globalCompositeOperation        Sets or returns how a new image is drawn onto an existing image

Other
Method                              Description
ctx.save()                          Saves the state of the current context
ctx.restore()                       Returns previously saved path state and attributes
ctx.createEvent()
ctx.getContext()
ctx.toDataURL()
'''

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

            function animation() {
                for (var i=0; i<1000; i++) {
                    var x = Math.floor(Math.random() * 500);
                    var y = Math.floor(Math.random() * 500);
                    setpixel(x,y);
                }
                ctx.putImageData(this.rectData, 10, 10);
                setInterval(animation, 0);
            }
            animation()

        </script>
    </body>
</html>
'''

'''
                ctx.putImageData(rectData, 10, 10);

'''

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)