Темнее html5 холст

Question

Я пытаюсь использовать холст изображение в качестве фона здесь: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php

код, как показано ниже:

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

Помимо компоновки материала, который должен быть фиксированным, мне нужно немного потемните изображение, поэтому текст всегда будет виден, также если я использую белый обложку альбома. Могу ли я каким-то образом в коде выше добавить строку или 2, чтобы затемнить изображение? Я знаю, что могу использовать CSS3, но кажется, что для него просто невозможно создать дополнительный уровень обработки вместо того, чтобы делать это в первый раз.

Я совершенно новый с холстом, поэтому всякая помощь очень ценится!

Answer 1

Вы можете сделать холст темнее, рисуя полупрозрачный темный прямоугольник над изображением, когда после того, как вы рисуете изображение

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

Here is an example jsFiddle

Вы также можете быть в состоянии использовать context.globalAlpha или context.globalCompositeOperation = "lighter"; как описано в this SO post