Databases
StackOverflow2013
Postsdbo
POHtml5 Canvas Javascript making my webpage links unresponsive
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHtml5 Canvas Javascript making my webpage links unresponsive
    primarykey
    data
    text
    <p>I have an html5 canvas animation. When it runs it makes my page unresponsive or rather my links to navigate the page become unresponsive. No code is directly doing this. I think it is because the javascript is slowing down the browser to much. Anyways heres a jsfiddle to the code</p> <p><a href="http://jsfiddle.net/#&amp;togetherjs=psm0e5RNeI" rel="nofollow">http://jsfiddle.net/#&amp;togetherjs=psm0e5RNeI</a></p> <p>When I remove the include main javascript file (the one in fiddle) the links work fine. If I comment out the setInterval timer in the code the web page remains unresponsive. If I comment out the calls to the cloud and light function under the draw function which is drawing elements based off of the 2 other libraries the web page still remains unresponsive.</p> <p>Could someone help me figure out why this is happening?</p> <p>Thank you!</p> <p>I would also like to add there are no errors in the web console as well.</p> <p>Here I also decided to include the javascript:</p> <pre><code>var canvas = document.getElementById('canvas'), context=canvas.getContext('2d'); var fullC = Math.PI * 2; // Ending circle angle var cW = canvas.width; // canvas width var cH = canvas.height; // canvas height var sizeInc = 0; var globCount = 0; // how many times start is called // cloud vars // var radius = 90; // radious for clouds var clX = radius / 2; var clY = radius / 2; var centreX = context.canvas.width / 2; var centreY = context.canvas.height / 2; var colour = {r:255, g:255, b:254}; var alpha = 0.2; var circles = 20; // number of circles in the cloud // rain vars // var rain = []; var rainC = 55; /// Rain objects /// rain[0] = { radius:2.5, col:'red', speed: getRandomInt(5,20), ry:0, rx:getRandomInt(0,canvas.width + 1000) }; for(var i = 1; i &lt;= rainC; i++){ rain[i] = { radius:2.5, col:'red', speed: getRandomInt(5,20), ry:0, rx:getRandomInt(0,canvas.width + 1000) }; } /// Lightning /// var lt = new lightning({glow: false}); var drawL = false; /// Starts the Animation /// function start(){ globCount ++; clearIt(); setBack(); draw(); } /// Draw calls all the components of the animation /// function draw(){ clouds(); rainIt(); light(); } /// Lightning Function /// function light(){ var modResult = globCount % 50; var modResult1 = globCount % 10; if(modResult === 0){ drawL = true; } if(modResult1 === 0){ lt.hide(); } if(drawL === true){ lt.hide(); lt.show(getRandomInt(100,canvas.width - 25),800, getRandomInt(100,canvas.width), canvas.height); drawL = false; } } /// Draws the clouds /// function clouds(){ /// Draws a concentrated cluster and a sparse cluster /// for(var i = 0; i &lt;= 14; i++){ $cloudgen.drawCloud(context, clX + (i * radius) - 10, clY, radius + 20, colour, alpha, circles); $cloudgen.drawCloud(context, clX + (i * radius) - 10, clY, radius, colour, 0.15, circles); } } /// Rain function /// function rainIt(){ /// Draws all the rain /// rain.forEach(function(rain){ context.beginPath(); context.fillStyle = 'rgba(102,217,239,.5)'; context.arc(rain.rx,rain.ry,rain.radius,0,fullC); context.closePath(); context.fill(); /// Resets rains x y points /// if(rain.ry &gt; canvas.height || rain.ry &lt; 0){ rain.ry = 0; rain.rx = getRandomInt(0,canvas.width); } if(rain.rx &gt; canvas.width || rain.rx &lt; 0){ rain.ry = 0; rain.rx = getRandomInt(0,canvas.width); } rain.rx = rain.rx + getRandomInt(1,12); rain.ry = rain.ry + rain.speed; }); } /// Sets the background /// function setBack(){ context.fillStyle = 'rgba(61,131,227,0.5)'; context.fillRect(0,0,cW,cH); } /// Clears Canvas /// function clearIt(){ context.clearRect(0,0,canvas.width,canvas.height); } /// Random number maker /// function getRandomInt (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } setInterval(start,100); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStom selleck
    1. UStom selleck
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI think its working now
      singulars
      1. POHtml5 Canvas Javascript making my webpage links unresponsive
      1. UStom selleck
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload