Darken html5 canvas

Question

I'm trying to use a canvas image as background here: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php

The code is as below:

window.onload=function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    stackBoxBlurImage('coverbgblur', 'canvas', 19, false, 2);
}

Beside the layout stuff that needs to be fixed, I need to darken the image a little bit, so the text will always be visible, also if I use a white album-cover. Can I somehow in the code above add a line or 2 that will darken the image? I know I can use CSS3, but its seems unsmart to create an extra layer of processing instead of doing it right the first time.

I'm quite new with canvas, so every kind of help is hugely appreciated!

Answer 1

You can make the canvas appear darker by drawing a semi-transparent dark rectangle over the image when after you draw the image

context.fillStyle = "rgba(0, 0, 0, 0.4)";
context.fillRect(0, 0, 700, 500);

Here is an example jsFiddle

You may also be able to use context.globalAlpha or context.globalCompositeOperation = "lighter"; as described in this SO post