javascript - Is context.clearRect() really THAT expensive? -


i have piece of canvas animation exhibiting weird characteristics:

http://jsbin.com/olasol/2/edit

i'm on latest version of chrome. i'm using chrome's inbuilt fps monitor (you can activate going about:flags). have marked line in javascript section think potential culprit:

fallingctx.clear();

this line nothing special. calls function in-turn calls clearrect().

the "weird" things notice are:

  1. the clear(); function causes noticeable fps drop on laptop (core 2 duo), not on desktop (i5 2500k).

  2. removing line alone sufficient produce 60fps on laptop well. expected, canvas doesn't clear after each frame, still, produces stable 60fps.

  3. the fps drop happens when chrome window on larger side! when shrink window , reload, doesn't happen! (is more expensive clear larger rectangle?).

  4. i tried replacing clear() drawimage() of full white jpeg cover canvas. javascript able 200 drawimage() executions each cycle smaller image particles (evident second point). however, when add 1 single drawimage overall canvas, lags again! (make sure output occupies entire screen in order reproduce result.)

why happening? how fix it?

it really depends on hardware, think invocation of clearrect has do! must zero-out piece of memory large enough handle canvas contents. can costly. think how memory has hold rgba @ hd resolutions... that's on 2 million pixels of data, around 8 mb in bytes admittedly, it's not that these days in general, if there's bandwidth or caching issues related pushing memory video card or doing 60 times second... well, expect problems.

what i've heard works clear around image formerly drawn. see http://jsbin.com/olasol/6/edit

i made following changes you.

    (var i=0; i< noofdrops; ++i)     {         fallingctx.clearrect(           fallingdrops[i].x-1,           fallingdrops[i].y-1,           fallingdrops[i].image.width+2,           fallingdrops[i].image.height+2);     }     (var i=0; i< noofdrops; ++i)     {         fallingdrops[i].y += fallingdrops[i].speed; //set falling speed         fallingctx.drawimage (fallingdrops[i].image, fallingdrops[i].x, fallingdrops[i].y);     }

there's reason need clearrect around image rendered simple reason escapes me. (it things being rendered not quite @ pixel specified... forget exactly).

you need fact starting render loop before image loaded (also in jsbin) added

var imgsource = "http://lorempixel.com/20/20/sports/";  var imgobj = new image();

and replaced superinit

function superinit() {      imgobj.onload = function(){         flowerfallsetup();         requestanimframe(flowerfall);     }     imgobj.onerror = function (){         alert("could not load image");     }     imgobj.src = imgsource; }

edit: i forgot mention because of prior image setup, did change line in flowerfallsetup : 

      fallingdr["image"] = imgobj;

there many ways handle asynchronous loading of images, chose 1 easy example.

edit: have confess, there might bit more this. works fine on desktop browsers, on iphone, there are clipping issues. if can figure out what's causing problem i'll try post update.


Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db :
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle);
Read more