javascript - What is difference between fillRect(0,0,0,1) and clearRect() -
is there difference between:
ctx.fillstyle = "rgba(0, 0, 0, 1)"; ctx.fillrect(0, 0, 100, 100)
and
ctx.clearrect(0, 0, 100, 100)
any kind of difference in performance or resulting image or canvas data?
(updated correspond ops changes in question:) fillrect()
ctx.fillstyle = "rgba(0, 0, 0, 1)";
fill region opaque pixels, in case black (note alpha normalized value [0,1]).
clearrect()
opposite, "clearing" pixels bitmap becomes transparent (technically region filled black transparent pixels).
clearrect()
optimized while fillrect()
bound compositing/blending rules (porter-duff) former faster. means clearrect free fill region directly based on current transformation, while fillrect has go through compositing/blending formula whatever set (globalcompositeoperation) in addition.
that of course in theory - depend on browser implementation. here simple performance test showing in chrome filling faster clearing (i not sure goes on chrome , canvas nowadays), in firefox clearing many times faster filling, both faster chrome:
in browsers supports opacity flag of context, can disable alpha if don't need it, make canvas respond faster (the alpha here being blending element , composition browser background). see speed improvements in particular opera browser, firefox , chrome support flag. disable alpha:
var ctx = canvas.getcontext("2d", {alpha: false});
Comments
Post a Comment