Как сделать эффект пульсации js
Нужно сделать небольшую пульсацию фона красноватым оттенком при смерти, я для этого использовал простые изменения свойств css но Есть ли способ симпатичнее и более гибкий?
canvasOuter.style.backgroundColor = '#120c0c';
setTimeout(function() {canvasOuter.style.transition = '1s'}, 100)
setTimeout(function() {canvasOuter.style.backgroundColor = '#101010'}, 100); 
При использовании канваса нет смысла работать напрямую с элементом DOM. Можно попробовать сделать прямоугольник во весь размер холста и покрасить его в радиальный градиент с легкой прозрачностью, за изменение которой будет отвечать функция на основе requestAnimationFrame().
Если делать средствами Canvas, то это может быть прямоугольник с прозрачностью.
гугли функцию рандом. Она выбрасывает значение от -0,5 до 0.5, можно и пределы задать от 0 до 100 например. Затем надо тактировать скорость генерации..
В итоге у тебя будут значения от и до с определённой частотой, можно и туда запихнуть рандом и будет даже время рандомноным. Написать код не сложно, тебе же надо, гугли реально рандом.
В ссылке пробел убери
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ gsap.min.js"></script>
var canvasOuter = document.getElementById('canvas-outer');
var tl = gsap.timeline();
tl.to (canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#101010'});