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:

perfsnap

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -