How do I make a sprite blink on an HTML5 canvas?

Question

I'm thinking of the flashing effect many games have when a character gets hit and takes damage. Something like overlaying a lighter color on visible sprite pixels for a second.

Answer 1

The simplest way to get such an effect is to literally blink the sprite: Just don't draw it half the time.

var frequency = 200;
if (! blinking || Math.floor(Date.now() / frequency) % 2) {
    ctx.drawImage(...);
}

The idea is that when blinking is set to true, the sprite will flash at the given frequency.

Answer 2

As Maksim said about canvas pixels. You can draw your sprites in unusual way. I can share what I have been working on last week.

function drawImageBlended(src, sx, sy, dest, dx, dy, w, h, blendMode) {
    var srcCont = src.getContext("2d");
    var srcData = srcCont.getImageData(sx,sy,w,h);
    var sPixels = srcData.data;
    var destCont = dest.getContext("2d");
    var destData = destCont.getData(dx,dy,w,h);
    var dPixels = destData;
    var a = 0;
    for (var i = 0, il = sPixels.length; i < il; i += 4) {
        a = sPixels[i+3];
        if (a!==0) {//Skipif alpha is 0
            dPixels[i] = blend(dPixels[i], sPixels[i], blendMode, a);
            dPixels[i+1] = blend(dPixels[i+1], sPixels[i+1], blendMode, a);
            dPixels[i+2] = blend(dPixels[i+2], sPixels[i+2], blendMode, a);
        }
    }
    destCont.putImageData(destData,dx,dy);
}

function drawImageBlendedWithColor(src, sx, sy, dest, dx, dy, w, h, rgb, blendColorMode, blendMode) {//rgb = {r,g,b} each [0..255]
    var srcCont = src.getContext("2d");
    var srcData = srcCont.getImageData(sx,sy,w,h);
    var sPixels = srcData.data;
    var destCont = dest.getContext("2d");
    var destData = destCont.getData(dx,dy,w,h);
    var dPixels = destData;
    var a = 0;
    for (var i = 0, il = sPixels.length; i < il; i += 4) {
        a = sPixels[i+3];
        if (a!==0) {//Skipif alpha is 0
            dPixels[i] = blend(blend(rgb[0], dPixels[i], blendColorMode,a), sPixels[i], blendMode, a);
            dPixels[i+1] = blend(blend(rgb[1], dPixels[i+1], blendColorMode,a), sPixels[i+1], blendMode, a);
            dPixels[i+2] = blend(blend(rgb[2], dPixels[i+2], blendColorMode,a), sPixels[i+2], blendMode, a);
        }
    }
    destCont.putImageData(destData,dx,dy);
}

function overlay(a, b) { // a, b = [0..256]
    return (a < 128) ? (a*b) >> 7 : 255 - ((255-a) * (255-b) >> 7);
}

function multiply(a, b) { // a, b = [0..256]
    return a * b >> 8;
}

function screen(a, b) { // a, b = [0..256]
    return 255 - ((255 - a) * (255 - b) >> 8);
}

function blend( a, b, mode, o) { // a, b, o = [0..256]
    return a + ((mode(a, b) - a) * o >> 8);
}

drawImageBlended takes your sprite canvas (hope its on canvas) and destination canvas, reads every pixel in drawing boundaries and blends in your sprite canvas. If your hero is not a canvas but many sprites, think of doing its own small canvas to pre draw it on, and feed to this function. For other Blend modes visit pegtop site There you will find effective delphi code and mathematical formulas. Pretty and comfy.

I hope my untested code will work, because I just piled it up from my scratches. Yeagh, I could do something like

CanvasRenderingContext2DPrototype.prototype.drawImageBlended= function (src, sx, sy, dx, dy, w, h, blendMode) { var dest = this; ...}

But I'm not going to test it. Good luck with that.