Develop Reference

How to draw vertical lines as a music track progressbar using Canvas in Javascript

I am trying to build a custom audio player. I am using HtmlAudioElement for that. I have managed to do play, pause, display duration and all but i have stuck where i need to show a progress bar when playing a track. I have percentage value( How much song already played ) which is updating every millisecond. I was wondering using that percentages value can i use canvas and draw vertical lines as percentage increases?
So this is how progress bar should change color as percentage increases. I have no idea where to start. I am very new to Canvas. Any Help ?
I have tried this so far. ( This is not what i want) .
const canvas = document.getElementById('progress');
canvas.width = 1920;
canvas.height = 100;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'grey';
for(let i = 0; i < 1000; i+=10){
console.log(i);
ctx.fillRect(i,0,5,100);
}
let count = 0;
let percent = 0;
ctx.fillStyle = 'orange';
function draw(){
console.log('Hello')
ctx.fillRect(count,0,5,100);
count+=10;
if(count > 100/1){
return;
}
window.requestAnimationFrame(draw);
}
draw();
So this what it looks right now.
I want as playing percentage changes i need to hook that value somewhere in Canvas so i can draw those lines.
Thanks in advance :)

You can read the value (% done) directly from the media object that holds it.
I can not workout what it is you are having trouble with. you mention color the following is a simple color changing bar.
Basic progress bar
Some constants to define the progress bar
const width = 500;
const height = 20;
const startColor = {r: 255, g: 128, b: 0}; // unsigned byte values 0 - 255
const endColor = {r: 255, g: 128, b: 0};
To interpolate the color
function progressColor(start, end, progress) {
const r = (end.r - start.r) * progress + start.r;
const g = (end.g - start.g) * progress + start.g;
const b = (end.b - start.b) * progress + start.b;
return `rgb(${r | 0},${g |0 }, ${b | 0})`;
}
To draw the bar
function progressBar(progress) {
ctx.fillStyle = progressColor(startColor, endColor, progress);
// whatever design you want the example is just a simple bar
ctx.fillRect(0,0, width * progress, height);
}
The main loop
The main loop every 60th second.
If the audio is paused it stops.
Care must be taken when starting the animation loop not to start it more than once
Note that the audio will have stopped up to ~1/60th second before the last animation frame is rendered.
The main animation loop...
var progressAnimating = false; // this is to avoid more that one mainLoop playing
function mainLoop() {
ctx.clearRect(0,0,width,height);
// draw backing bar here
const fractionDone = audio.time / audio.duration;
progressBar(fractionDone);
// only while not paused
if (!audio.paused) {
requestAnimationFrame(mainLoop);
} else {
progressAnimating = false; // flag that the animation has stopped
}
}
Use Audio events to start animation
Use the audio play event to start the animation.
Check to make sure that the animation is not playing before you request the first frame.
If the animation is still active then it will continue by its self
.
audio.addEventListener("play",() => {
if (!progressAnimating) {
requestAnimationFrame(mainLoop);
progressAnimating = true;
}
});
Styling the progress bar
The next function replaces the solid bar from above.
It uses the clip area to limit the width so you dont need to fiddle with fractional bars.
const barWidth = 4; // in px
const barSpacing = 8; // distance from left edge to next left edge in px
function progressBar(progress) {
ctx.save(); // save the unclipped state
ctx.beginPath(); // create the clip path
ctx.rect(0,0, width * progress, height);
ctx.clip();
ctx.fillStyle = progressColor(startColor, endColor, progress);
ctx.beginPath(); // draw all bars as one
var x = 0;
while (x < width * progress) {
ctx.rect(x, 0, barWidth, height);
x += barSpacing;
}
ctx.fill(); // draw that bars
ctx.restore(); // restore unclipped state
}

Placing Text on HTML5 Canvas inconsistent across browsers

I'm placing text in an HTML5 canvas. I'm setting the context textAlign value to center and the textBaseline to "hanging"
I'm confused, because safari and chrome and both webkit and the text placement is diffrent even when told to be in the same spot.
Chrome looks correct:
as does firefox
however safari places the text lower (same code)
any idea how safari calculates the position differently so I can build an exception for it?

Text to fit is a pain. Here is a none standard way to make text fit almost pixel perfect. (width may come inside requested a little and some fonts are just way to out there to measure).
This method renders the text at a large size "100px" and then measures its various parts. You can the fit to a rectangle, with four options that you can see in the demo. T, H and letters like that tend to be slightly shorter than O, G and rounded letters, you can opt to keep the round bits inside or not, you can ignore the tails 'y,j,g' or keep them inside.
The measuring function renders text several times to find the various parts, you can overlap several letters if you want a better sample or a specific font is a pain.
This solution will fit all browsers that have good canvas support.
Sorry about the naming but this particular issue does me in, we get great text in every other browser API so why not canvas????? (secret conspiracy of the SVG camp LOL ;) me thinks
Two functions. First measures the text, and returns an object containing the relevant info, and the second renders text to fit a rectangle. See the code at the bottom how to use it and set the two flags that control the hanging tail and roundy bits.
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
function superWTFCanvasTextMessure(font){ // just the font name please.....
var c = document.createElement("canvas"); // make canvas
var ctx1 = c.getContext("2d"); // get the thing that draw the stuff
ctx1.font = "100px "+font; // big font
ctx1.textAlign = "center"; // put it in the middle
ctx1.textBaseline = "middle";
// draw text nice and solid...
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lq",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lg",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lj",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
var data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var top = 0;
while(data[top++] === 0); // find the first pixel on from the top;
var tail = data.length - 1;
while(data[tail--] === 0); // find the first pixel on from the bottom;
ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
// and now for the Base draw text nice and solid...
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var bum = data.length - 1;
while(data[bum--] === 0); // find the first pixel on from the bottom;
// and the round bits the poke out in all the wrong places.
ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
// and now for the Base draw text nice and solid...
ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("J",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("?",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("G",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var head = 0;
while(data[head++] === 0); // find the first pixel on from the bottom;
var theOtherBit = data.length - 1;
while(data[theOtherBit--] === 0); // find the first pixel on from the bottom;
return {
body: Math.floor(bum / canvas.width) - Math.floor(top / canvas.width)+1,
all : Math.floor(tail / canvas.width) - Math.floor(top / canvas.width)+1,
offset : Math.floor(c.height/2) - Math.floor(top / canvas.width),
t2A : Math.floor(theOtherBit / canvas.width) - Math.floor(head / canvas.width)+1,
t2t : Math.floor(tail / canvas.width) - Math.floor(head / canvas.width)+1,
offsetHead : Math.floor(c.height/2) - Math.floor(head / canvas.width),
font : ctx1.font,
};
}
function drawPixelPerfectTextTheHardWay(text,left,top,width,height,sWTFDesc){
var sy,offy;
ctx.font = sWTFDesc.font; // set up the same font as measured. (dont worry it will be scaled and can be any size but if not measure at 100 px this will not work as well)
ctx.textAlign = "center";
ctx.textBaseline = "middle";
var w = ctx.measureText(text).width; // get the width
if(sWTFDesc.bumsDown){
if(sWTFDesc.extrasIn){
sy = height/ sWTFDesc.t2A; // get the height scale
}else{
sy = height/ sWTFDesc.body; // get the height scale
}
}else{
if(sWTFDesc.extrasIn){
sy = height/ sWTFDesc.t2t; // get the height scale
}else{
sy = height/ sWTFDesc.all; // get the height scale
}
}
var sx = width / w; // get the x scale
if(sWTFDesc.extrasIn){
offy = sWTFDesc.offset * sy; // get top offset
}else{
offy = sWTFDesc.offset * sy; // get the correct offset
}
// set up the tranform
ctx.setTransform(sx,0,0,sy,left + width / 2, top + offy);
ctx.fillText(text,0,0);
ctx.setTransform(1,0,0,1,0,0); // reset the tranform to the default..
// all diddly done..
}
ctx.clearRect(0,0,canvas.width,canvas.height)
var superFontDesc = superWTFCanvasTextMessure("arial");
ctx.strokeStyle = "black";
ctx.fillStyle = "red";
ctx.strokeRect(10,200,700,140);
drawPixelPerfectTextTheHardWay("mind p & q's ? j,g",10,200,700,140,superFontDesc);
ctx.fillStyle = "green";
ctx.strokeRect(20,400,700,120);
superFontDesc.bumsDown = true;
drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,400,700,120,superFontDesc);
ctx.fillStyle = "blue";
ctx.strokeRect(20,20,700,140);
superFontDesc.bumsDown = true;
superFontDesc.extrasIn= true;
drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,20,700,140,superFontDesc);
ctx.fillStyle = "#a50";
ctx.strokeRect(20,570,700,140);
superFontDesc.bumsDown = false;
superFontDesc.extrasIn= true;
drawPixelPerfectTextTheHardWay("????&GGhjqgy",20,570,700,140,superFontDesc);
ctx.font = "20px arial";
ctx.textAlign = "left";
ctx.fillStyle = "black";
ctx.fillText("Round bits in and tails hanging.",10,174);
ctx.fillText("Round bits out and tails in.",10,354);
ctx.fillText("Round bits out and tails hanging.",10,540);
ctx.fillText("Round bits out and tails in.",10,724);

draw outer and inner border around any canvas shape

How to draw outer and inner border around any canvas shape?
I'm drawing several stroke-only shapes on an html canvas, and I would like to draw an inner and outer border around them.
draft example:
Is there a generic why to do it for any shape (assuming it's a closed stroke-only shape)?

Two methods
There is no inbuilt way to do this and there are two programmatic ways that I use. The first is complicated and involves expanding and contracting the path then drawing along that path. This works for most situations but will fail in complex situation, and the solution has many variables and options to account for these complications and how to handle them.
The better of the two
The second and easiest way that I present below is by using the ctx.globalCompositeOperation setting to mask out what you want drawn or not. As the stroke is drawn along the center and the fill fills up to the center you can draw the stroke at twice the desired width and then either mask in or mask out the inner or outer part.
This does become problematic when you start to create very complex images as the masking (Global Composite Operation) will interfere with what has already been drawn.
To simplify the process you can create a second canvas the same size as the original as a scratch space. You can then draw the shape on he scratch canvas do the masking and then draw the scratch canvas onto the working one.
Though this method is not as fast as computing the expanded or shrunk path, it does not suffer from the ambiguities faced by moving points in the path. Nor does this method create the lines with the correct line join or mitering for the inside or outside edges, for that you must use a the other method. For most purposes the masking it is a good solution.
Below is a demo of the masking method to draw an inner or outer path. If you modify the mask by including drawing a stroke along with the fill you can also set an offset so that the outline or inline will be offset by a number of pixels. I have left that for you. (hint add stroke and set the line width to twice the offset distance when drawing the mask).
var demo = function(){
/** fullScreenCanvas.js begin **/
var canvas = ( function () {
canvas = document.getElementById("canv");
if(canvas !== null){
document.body.removeChild(canvas);
}
// creates a blank image with 2d context
canvas = document.createElement("canvas");
canvas.id = "canv";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = 1000;
canvas.ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
return canvas;
})();
var ctx = canvas.ctx;
/** fullScreenCanvas.js end **/
/** CreateImage.js begin **/
// creates a blank image with 2d context
var createImage = function(w,h){
var image = document.createElement("canvas");
image.width = w;
image.height =h;
image.ctx = image.getContext("2d");
return image;
}
/** CreateImage.js end **/
// define a shape for demo
var shape = [0.1,0.1,0.9,0.1,0.5,0.5,0.8,0.9,0.1,0.9];
// draws the shape as a stroke
var strokeShape = function (ctx) {
var w, h, i;
w = canvas.width;
h = canvas.height;
ctx.beginPath();
ctx.moveTo(shape[0] *w, shape[1] *h)
for (i = 2; i < shape.length; i += 2) {
ctx.lineTo(shape[i] * w, shape[i + 1] * h);
}
ctx.closePath();
ctx.stroke();
}
// draws the shape as filled
var fillShape = function (ctx) {
var w, h, i;
w = canvas.width;
h = canvas.height;
ctx.beginPath();
ctx.moveTo(shape[0] * w,shape[1] * h)
for (i = 2; i < shape.length; i += 2) {
ctx.lineTo(shape[i]*w,shape[i+1]*h);
}
ctx.closePath();
ctx.fill();
}
var drawInOutStroke = function(width,style,where){
// clear the workspace
workCtx.ctx.globalCompositeOperation ="source-over";
workCtx.ctx.clearRect(0, 0, workCtx.width, workCtx.height);
// set the width to double
workCtx.ctx.lineWidth = width*2;
workCtx.ctx.strokeStyle = style;
// fill colour does not matter here as its not seen
workCtx.ctx.fillStyle = "white";
// can use any join type
workCtx.ctx.lineJoin = "round";
// draw the shape outline at double width
strokeShape(workCtx.ctx);
// set comp to in.
// in means leave only pixel that are both in the source and destination
if (where.toLowerCase() === "in") {
workCtx.ctx.globalCompositeOperation ="destination-in";
} else {
// out means only pixels on the destination that are not part of the source
workCtx.ctx.globalCompositeOperation ="destination-out";
}
fillShape(workCtx.ctx);
ctx.drawImage(workCtx, 0, 0);
}
// clear in case of resize
ctx.globalCompositeOperation ="source-over";
ctx.clearRect(0,0,canvas.width,canvas.height);
// create the workspace canvas
var workCtx = createImage(canvas.width, canvas.height);
// draw the outer stroke
drawInOutStroke((canvas.width + canvas.height) / 45, "black", "out");
// draw the inner stroke
drawInOutStroke((canvas.width + canvas.height) / 45, "red", "in");
// draw the shape outline just to highlight the effect
ctx.strokeStyle = "white";
ctx.lineJoin = "round";
ctx.lineWidth = (canvas.width + canvas.height) / 140;
strokeShape(ctx);
};
// run the demo
demo();
// incase fullscreen redraw it all
window.addEventListener("resize",demo)

Make clearRect() of canvas work faster

I am trying to design a traveling sine wave in JavaScript, but the design appears quite slow. The main bottleneck is the clearRect() for canvas clearing.
How can I solve this?
Also I am drawing the pixel by ctx.fillRect(x, y,1,1), but when I clear using clearRect(x, y,1,1), it leaves some footprints. Instead I have to do clearRect(x, y,5,5) to get proper clearing. What can be the work around?
/******************************/
var x = 0;
var sineval = [];
var offset = 0;
var animFlag;
function init() {
for(var i=0; i<=1000; ++i){
sineval[i] = Math.sin(i*Math.PI/180);
}
// Call the sineWave() function repeatedly every 1 microseconds
animFlag = setInterval(sineWave, 1);
//sineWave();
}
function sineWave()
{ //console.log('Drawing Sine');
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
}
for(x=0 ; x<1000 ;++x){
// Find the sine of the angle
//var i = x % 361;
var y = sineval[x+offset];
// If the sine value is positive, map it above y = 100 and change the colour to blue
if(y >= 0)
{
y = 100 - (y-0) * 70;
ctx.fillStyle = "green";
}
// If the sine value is negative, map it below y = 100 and change the colour to red
if( y < 0 )
{
y = 100 + (0-y) * 70;
ctx.fillStyle = "green";
}
// We will use the fillRect method to draw the actual wave. The length and breath of the
if(x == 0) ctx.clearRect(0,y-1,5,5);
else ctx.clearRect(x,y,5,5);
ctx.fillRect(x, y,1,1 /*Math.sin(x * Math.PI/180) * 5, Math.sin(x * Math.PI/180 * 5)*/);
}
offset = (offset > 360) ? 0 : ++offset ;
}

You need to refactor the code a bit:
Move all global variables such as canvas and context outside of the loop function
Inside the loop, clear full canvas at beginning, redraw sine
Use requestAnimationFrame instead of setInterval
Replace fillRect() with rect() and do a single fill() outside the inner for-loop
Using a timeout value of 1 ms will potentially result in blocking the browser, or at least slow it down noticeably. Considering that a monitor update only happens every 16.7ms this will of course be wasted cycles. If you want to reduce/increase the speed of the sine you can reduce/increase the incremental step instead.
In essence:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var sineval = [];
var offset = 0;
init();
function init() {
for (var i = 0; i <= 1000; ++i) {
sineval.push(Math.sin(i * Math.PI / 180));
}
// Call the sineWave() function
sineWave();
}
function sineWave() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.beginPath();
ctx.fillStyle = "green";
// draw positive part of sine wave here
for (var x = 0; x < 1000; x++) {
var y = sineval[x + offset];
if (y >= 0) {
y = 100 - (y - 0) * 70;
ctx.rect(x, y, 2, 2);
}
}
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "red";
// draw negative part of sine wave here
for (var x = 0; x < 1000; x++) {
var y = sineval[x + offset];
if (y < 0) {
y = 100 - (y - 0) * 70;
ctx.rect(x, y, 2, 2);
}
}
ctx.fill();
offset = (offset > 360) ? 0 : ++offset;
requestAnimationFrame(sineWave);
}
<canvas id="canvas" width=800 height=500></canvas>
And of course, if you load the script in <head> you need to wrap it in a window.onload block so canvas element is available. Or simply place the script at the bottom of the page if you haven't already.

A few speedups and odd ends:
In init, set up the sine wave pixel values one time.
Use typed arrays for these since sticking with integers is faster than using floats if possible.
We will manipulate the pixel data directly instead of using fill and clear. To start this, in init we call ctx.getImageData one time. We also just one time max the alpha value of all the pixels since the default 0 value is transparent and we want full opacity at 255.
Use setInterval like before. We want to update the pixels at a steady rate.
Use 'adj' as knob to adjust how fast the sine wave moves on the screen. The actual value (a decimal) will depend on the drawing frame rate. We use Date.now() calls to keep track of milliseconds consumed across frames. So the adjustment on the millisecond is mod 360 to set the 'offset' variable. Thus offset value is not inc by 1 every frame but instead is decided based on the consumption of time. The adj value could later be connected to gui if want.
At end of work (in sineWave function), we call requestAnimationFrame simply to do the ctx.putImageData to the canvas,screen in sync to avoid tearing. Notice 'paintit' function is fast and simple. Notice also that we still require setInterval to keep steady pace.
In between setting the offset and calling requestAnimationFrame, we do two loops. The first efficiently blackens out the exact pixels we drew from the prior frame (sets to 0). The second loop draws the new sine wave. Top half of wave is green (set the G in pixel rgba to 255). Bottom half is red (set the R pixel rgba to 255).
Use the .data array to paint a pixel, and index it to the pixel using 4x + 4y*canvas.width. Add 1 more if want the green value instead of the red one. No need to touch the blue value (byte offset 2) nor the already set alpha (byte offset 3).
The >>>0 used in some places turns the affected value into an unsigned integer if it wasn't already. It can also be used instead of Math.ceil. .data is typed Array already I think.
This answer is rather late but it addresses some issues brought up in comments or otherwise not yet addressed. The question showed up during googling.
Code hasn't been profiled. It's possible some of the speedups didn't speed anything up; however, the cpu consumption of firefox was pretty light by the end of the adjustments. It's set to run at 40 fps. Make 'delay' smaller to speed it up and tax cpu more.
var sineval;
var offset = 0;
var animFlag;
var canvas;
var ctx;
var obj;
var milli;
var delay=25;
var adj=1/delay; // .04 or so for 25 delay
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
obj=ctx.getImageData(0,0,canvas.width,canvas.height);
for (let i=0; i<obj.data.length; i+=4) {
obj.data[i+3]=255; //set all alpha to full one time only needed.
}
sineval=new Uint8Array(1400); //set up byte based table of final pixel sine values.. 1400 degrees total
for (let i=0; i<=1400; ++i) { //1400
sineval[i] = (100-70*Math.sin(i*Math.PI/180))>>>0;
}
animFlag = setInterval(sineWave, delay); //do processing once every 25 milli
milli=Date.now()>>>0; //start time in milli
}
function sineWave() {
let m=((Date.now()-milli)*adj)>>>0;
let oldoff = offset;
offset=(m % 360)>>>0; //offset,frequency tuned with adj param.
for(x=0 ; x<1000 ;++x) { //draw sine wave across canvas length of 1000
let y=sineval[x+oldoff];
obj.data [0+x*4+y*4*canvas.width]=0; //black the reds
obj.data [1+x*4+y*4*canvas.width]=0; //black the greens
}
for(x=0 ; x<1000 ;++x) { //draw sine wave across canvas length of 1000
let y=sineval[x+offset];
if (y<100) {
obj.data [1+x*4+y*4*canvas.width]=255; //rGba //green for top half
} else {
obj.data [0+x*4+y*4*canvas.width]=255; //Rgba //red for bottom half
}
}
requestAnimationFrame(paintit); //at end of processing try to paint next frame boundary
}
function paintit() {
ctx.putImageData(obj,0,0);
}
init();
<canvas id="canvas" height=300 width=1000></canvas>

Black resized canvas not completely fading drawings to black over time

I have a black canvas with things being drawn inside it. I want the things drawn inside to fade to black, over time, in the order at which they are drawn (FIFO). This works if I use a canvas which hasn't been resized. When the canvas is resized, the elements fade to an off-white.
Question: Why don't the white specks fade completely to black when the canvas has been resized? How can I get them to fade to black in the same way that they do when I haven't resized the canvas?
Here's some code which demonstrates. http://jsfiddle.net/6VvbQ/35/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0, 0, 300, 150);
// Comment this out and it works as intended, why?
canvas.width = canvas.height = 300;
window.draw = function () {
context.fillStyle = 'rgba(255,255,255,1)';
context.fillRect(
Math.floor(Math.random() * 300),
Math.floor(Math.random() * 150),
2, 2);
context.fillStyle = 'rgba(0,0,0,.02)';
context.fillRect(0, 0, 300, 150);
setTimeout('draw()', 1000 / 20);
}
setTimeout('draw()', 1000 / 20);

The problem is two-parted:
There is a (rather known) rounding error when you draw with low alpha value. The browser will never be able to get the resulting mix of the color and alpha channel equal to 0 as the resulting float value that is mixed will be converted to integer at the time of drawing which means the value will never become lower than 1. Next time it mixes it (value 1, as alpha internally is a value between 0 and 255) will use this value again and it get rounded to again to 1, and forever it goes.
Why it works when you have a resized canvas - in this case it is because you are drawing only half the big canvas to the smaller which result in the pixels being interpolated. As the value is very low this means in this case the pixel will turn "black" (fully transparent) as the average between the surrounding pixels will result in the value being rounded to 0 - sort of the opposite than with #1.
To get around this you will manually have to clear the spec when it is expected to be black. This will involve tracking each particle/spec yourselves or change the alpha using direct pixel manipulation.
Update:
The key is to use tracking. You can do this by creating each spec as a self-updating point which keeps track of alpha and clearing.
Online demo here
A simple spec object can look like this:
function Spec(ctx, speed) {
var me = this;
reset(); /// initialize object
this.update = function() {
ctx.clearRect(me.x, me.y, 1, 1); /// clear previous drawing
this.alpha -= speed; /// update alpha
if (this.alpha <= 0) reset(); /// if black then reset again
/// draw the spec
ctx.fillStyle = 'rgba(255,255,255,' + me.alpha + ')';
ctx.fillRect(me.x, me.y, 1, 1);
}
function reset() {
me.x = (ctx.canvas.width * Math.random())|0; /// random x rounded to int
me.y = (ctx.canvas.height * Math.random())|0; /// random y rounded to int
if (me.alpha) { /// reset alpha
me.alpha = 1.0; /// set to 1 if existed
} else {
me.alpha = Math.random(); /// use random if not
}
}
}
Rounding the x and y to integer values saves us a little when we need to clear the spec as we won't run into sub-pixels. Otherwise you would need to clear the area around the spec as well.
The next step then is to generate a number of points:
/// create 100 specs with random speed
var i = 100, specs = [];
while(i--) {
specs.push(new Spec(ctx, Math.random() * 0.015 + 0.005));
}
Instead of messing with FPS you simply use the speed which can be set individually per spec.
Now it's simply a matter of updating each object in a loop:
function loop() {
/// iterate each object
var i = specs.length - 1;
while(i--) {
specs[i].update(); /// update each object
}
requestAnimationFrame(loop); /// loop synced to monitor
}
As you can see performance is not an issue and there is no residue left. Hope this helps.

I don't know if i have undertand you well but looking at you fiddle i think that, for what you are looking for, you need to provide the size of the canvas in any iteration of the loop. If not then you are just taking the initial values:
EDIT
You can do it if you apply a threshold filter to the canvas. You can run the filter every second only just so the prefromanece is not hit so hard.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0,0,300,150);
//context.globalAlpha=1;
//context.globalCompositeOperation = "source-over";
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
canvas2.width=canvas2.height=canvas.width;
window.draw = function(){
var W = canvas2.width;
var H = canvas2.height;
context2.fillStyle='rgba(255,255,255,1)';
context2.fillRect(
Math.floor(Math.random()*W),
Math.floor(Math.random()*H),
2,2);
context2.fillStyle='rgba(0,0,0,.02)';
context2.fillRect(0,0,W,H);
context.fillStyle='rgba(0,0,0,1)';
context.fillRect(0,0,300,150);
context.drawImage(canvas2,0,0,300,150);
setTimeout('draw()', 1000/20);
}
setTimeout('draw()', 1000/20);
window.thresholdFilter = function () {
var W = canvas2.width;
var H = canvas2.height;
var i, j, threshold = 30, rgb = []
, imgData=context2.getImageData(0,0,W,H), Npixels = imgData.data.length;
for (i = 0; i < Npixels; i += 4) {
rgb[0] = imgData.data[i];
rgb[1] = imgData.data[i+1];
rgb[2] = imgData.data[i+2];
if ( rgb[0] < threshold &&
rgb[1] < threshold &&
rgb[2] < threshold
) {
imgData.data[i] = 0;
imgData.data[i+1] = 0;
imgData.data[i+2] = 0;
}
}
context2.putImageData(imgData,0,0);
};
setInterval("thresholdFilter()", 1000);
Here is the fiddle: http://jsfiddle.net/siliconball/2VaLb/4/

To avoid the rounding problem you could extract the fade effect to a separate function with its own timer, using longer refresh interval and larger alpha value.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0, 0, 300, 150);
// Comment this out and it works as intended, why?
canvas.width = canvas.height = 300;
window.draw = function () {
context.fillStyle = 'rgba(255,255,255,1)';
context.fillRect(
Math.floor(Math.random() * 300),
Math.floor(Math.random() * 300),
2, 2);
setTimeout('draw()', 1000 / 20);
}
window.fadeToBlack = function () {
context.fillStyle = 'rgba(0,0,0,.1)';
context.fillRect(0, 0, 300, 300);
setTimeout('fadeToBlack()', 1000 / 4);
}
draw();
fadeToBlack();
Fiddle demonstrating this: http://jsfiddle.net/6VvbQ/37/