PIL and javascript getImageData

I'm trying to modify pixels with Python (PIL) and read the pixels again with javascript

In python I did this,

from PIL import Image

im  = Image.open("foo.png").convert('RGBA')
pix = im.load()

print im.mode

for x in range(0, 10):
    for y in range(0, 10):
        pix[x, y] = (50, x, y, 100)

im.save("foo_new.png")

In javascript I read images like this,

<img src="foo_new.png" id="myImage">
<br>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<script>    
    window.onload = function() {
      var img = document.getElementById("myImage");

      var c   = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.drawImage(img, 0, 0);

      console.log(ctx.getImageData(0, 0, 10, 10).data)
    }
</script>

In chrome's console I expect to see the following sequence,

[50, 0, 0, 100]
[50, 0, 1, 100]
[50, 0, 2, 100]
...

However, I'm getting this

[51, 0, 0, 100], 
[51, 0, 0, 100], 
[51, 3, 0, 100],
[51, 3, 0, 100]

Totally unexpected ...

But the RGB mode works just fine, I don't really get it, anyone knows?