Shadow

by giacal

HTML

<canvas width=700 height=600></canvas>

JavaScript

var cv = document.querySelector('canvas'),
    ct = cv.getContext('2d');

        
    ct.font = "44px Georgia";
    ct.fillStyle = '#333333';
    ct.textAlign ='center';
    
    ct.shadowColor = 'rgba(0,0,0,0.5)';
    ct.shadowOffsetX = 5;
    ct.shadowOffsetY = 5;
    ct.shadowBlur = 2;
    
    ct.fillText("Panco Pinco", 150, 60);


document.addEventListener('mousemove',function(evt){
    ct.save();
    
    ct.fillStyle='#FFFFFF';
    ct.fillRect(0,0,cv.width,cv.height);
    ct.restore();
    ct.shadowOffsetX = -1*(evt.pageX-150)*0.1;
    ct.shadowOffsetY = -1*(evt.pageY-60) *0.1;
    
    ct.fillText("Panco Pinco", 150, 60);
});