HTML5 canvas compositing arithmetic seeming not correct -

HTML5 canvas compositing arithmetic seeming not correct -

i'm trying utilize alpha blending html5 canvas. while colors seem ok eye, examining actual pixel values context.getimagedata() shows discrepancies standard porter-duff model seem far big explained limitations of 8-bit arithmetic. here's summary:

read blank canvas => r=g=b=a=0. bit strange. since unpainted canvas shows pure white, have expected r=g=b=255. of course, a=0, r,g , b irrelevant anyway. nonetheless, i'm not sure how r=g=b=a=0 displays pure white.

paint on r=200,g=b=0,a=0.75. read result r=201,g=b=0,a=0.75. a=0.75 seems correct; porter-duff want a_final=.75+(.25*0)=.75. g=b=0 fine too. believe r should r=(.75*200)+(0*(.75-1)*0)=150. 150 != 201. instead, seem have used equation final_color=new_color r, g , b.

paint on 1 time again r=100,g=200,b=0,a=0.2. read result r=175,g=50,b=0,a=0.8. again, computations seem correct; .2+(1-.2)*.75=.8. however, porter-duff predicts r=(.2*100)+(.75*(1-.2)*201)=(.2*100)+(.6*201)=141. again, 141 != 175. greenish inconsistent. however, both r , g explained formula final_color=.25*new_color+.75*old_color -- unfortunately not porter-duff blending predicts.

a few other notes: - i've presented alpha values above beingness in range [0,1] simplicity. of course, getimagedata returns them in [0,255].

i've checked spec @ http://dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators_srcin, , seems agree me far canvas *should" do.

i've tried both chrome v37 , ie v11 same results.

painting a=0 works fine, painting a=1.

i found 2011 post (invalid blending results across browsers html5 canvas) complains of similar issues, believes browser bug. have hard time believing such blatant bug still remain 3 years later -- appear identically in 2 different browsers.

here code details how did reading: pixels=(context.getimagedata (10,10,1,1)).data; console.log(pixels);

and writing: context.beginpath(); context.arc (10,10, 10, 0, 2*math.pi); context.fillstyle = "rgba(200,0,0,.75)"; context.fill ();

thoughts?

canvas