Darken html5 canvas

canvas, html, html5-canvas

Solution

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

Problem

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!

Original source