How to fade out an item in canvas

I have a full screen canvas in my page. There are also some dive elements over this canvas. there is an circle element in the canvas that moves with the cursor everywhere in the page. However when the cursor arrives to the div element over the canvas, the circle shape stays in the last place it was on the canvas before arriving to the div.

DEMO: JSFIDDLE

Is ther any way that I can fade-out the circle shape when the cursor is over the div element and fade it in when it backs to the canvas?

Also is there any other effect rather than fading out? like making it small and then fade-out...

Here is the bit of code related to the circle:

function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    

    context.fillStyle = 'black';
    context.beginPath();
    context.arc(x, y, 60, 0, 2 * Math.PI);

}

Answers


Well, you can always create your own fade function that gets called on mouseout (or mouseleave) event. Here's one I quickly built for you:

function fadeOut(canvas, message, x, y, amount) {    
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var pattern = context.createPattern(imageResized, 'no-repeat');
    context.fillStyle = pattern;
    context.fill();    

    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    context.beginPath();
    context.arc(x, y, amount, 0, 2 * Math.PI);
    if (amount > 0) {
        setTimeout(function(){
            fadeOut(canvas, message, x, y, --amount);
        }, 2);
    }
    else {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
}

See it in action here: http://jsfiddle.net/2p9dn8ed/42/

Or in the snippet:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var imageObj = new Image();
console.log(window.innerWidth + "----" + window.innerHeight);

//Create another canvas to darw a resized image to.
var imageResized = document.createElement('canvas');
imageResized.width = width;
imageResized.height = height;
//Wait for the original image to low to draw the resize.
imageObj.onload = function() {
    //Find hoe mauch to scale the image up to cover.
    var scaleX = width / imageObj.width;
    var scaleY = height / imageObj.height;
    var scaleMax = Math.max(scaleX, scaleY);
    var ctx = imageResized.getContext('2d');
    ctx.scale(scaleMax, scaleMax);
    ctx.drawImage(imageObj, 0, 0);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, 60, 0, 2 * Math.PI);
    //context.stroke();
	//
	
}

function fadeOut(canvas, message, x, y, amount) {    
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, amount, 0, 2 * Math.PI);
    //context.stroke();
	//
    if (amount > 0) {
        setTimeout(function(){
            fadeOut(canvas, message, x, y, --amount);
        }, 2);
    }
    else {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message, mousePos.x, mousePos.y);

}, false);
    
    canvas.addEventListener('mouseout', function(evt){
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        console.log(1);
        fadeOut(canvas, message, mousePos.x, mousePos.y, 60);
    });


// Get the canvas element form the page
var canvas = document.getElementById("myCanvas");
 
/* Rresize the canvas to occupy the full page, 
   by getting the widow width and height and setting it to canvas*/
 
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
anvas, img {
    display:block;
    margin:1em auto;
    border:1px solid black;
}
canvas {
    background:url('../img/spiral_galaxy-1920x1080.jpg');
    background-size: cover;
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index:-1;
}
div{
   width:200px;
    height:200px;
    background:rgba(0,0,0,0.5);
    position: fixed;
    top: 20%;
    left: 20%;
}
<canvas id="myCanvas" width="578" height="400"></canvas>
<div><h1>TEXT</h1></div>

Need Your Help

Android Glide alternate cache in memory or disk

android caching android-glide

I´m working in an App which does have images that are used quite often, however there are others download used only once.

how to get grep working in Emacs on Windows (EmacsW32)

windows emacs grep emacsw32

M-x grep, M-x lgrep, M-x rgrep don't work in EmacsW32 for me.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.