javascript - Why do transparent objects become opaque when animating canvas element? -


i'm trying js app move balls on canvas element. set context.fillstyle = "rgba(12, 34, 56, 0.2)"; problem balls become opaque transparent after short period of time. how can maintain transparency , why become opaque?

here simplified version of code:

function startscript(){ var layer1       = document.getelementbyid("layer1"); var context1     = layer1.getcontext("2d");  var posx = 5;  context1.fillstyle = "rgba(12, 34, 56, 0.05)";  animate();  function animate() {      posx+=3;      context1.arc(posx, 200, 5, 0, math.pi*2);     context1.fill();      // request new frame     requestanimframe(function() {         animate();     }); } }  window.requestanimframe = (function(callback) {     return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe ||     function(callback) {         window.settimeout(callback, 1000 / 60);     }; })(); 

you have use context1.beginpath before new line draws

otherwise, context remembers , redraws previous arc in addition new arc.

also, should context1.closepath() after drawing circle-arc.

otherwise context drawing unclosed arc instead of circle.

context1.beginpath(); context1.arc(posx, 200, 5, 0, math.pi*2); context1.closepath(); context1.fill(); 

Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -