Bonjour Marengo, Aeros,
je suis curieux comme vous et j'ai cherché un peu..
et j'ai pondu ce petit script qui fait quelque chose qui s'approche de l'effet que vous recherchez :
Je connais mieux jquery que le javascript pure c'est pour cela que je l'utilise quand à canvas il assez facile à appréhender sur le site de mdn (mozilla developper network).
Pour le reste c'est un peu d'expérience de dev...
bonne soirée
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
#curseur {
position: absolute;
border: solid 1px black;
width: 50px;
height: 50px;
}
body {
margin: 0;
}
</style>
</header>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<div id="curseur"><canvas id='cursor-canvas' width="50" height="50"></canvas></div>
<script>
$(document).ready( function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cursorCanvas= document.getElementById('cursor-canvas');
var ctx_cc = cursorCanvas.getContext('2d');
//Une fois la page bien ready
//l'image de fond est chargée dans un objet Image
var img1 = new Image();
img1.src = 'images/Jules_dessine.jpg';
img1.onload = function(){
//L'image dessinée dans le canvas du fond
ctx.drawImage(img1, 0, 0, 640, 480);
};
//Le filtre qui floute l'image du fond est appliquée sur le
//canvas du fond
ctx.filter = 'blur(5px)';
//Lorsque le curseur se promène sur l'image
//l'image suit le curseur
$("#canvas").on("mousemove", function (event) {
var x=event.pageX;
var y=event.pageY;
$("#curseur").css("left",event.pageX);
$("#curseur").css("top",event.pageY);
//L'astuce pour afficher l'image en clair
//est dans cette seule ligne:
//img1 c'est l'image sans aucun effet de flou (le flou est appliqué au canvas)
//Les 4 premiers paramètres de cette fonction précise la portion de l'image
//que l'on veut afficher en l'occurrence on veut afficher ce qui ce trouve au
//niveau du curseur : x et y sont les coordonnées du curseur, 50x50 c'est la taille
// de la zone que l'on veut afficher!
//Les 4 derniers paramètres sont l'emplacement et la taille de l'image dans
//le canvas lui même ...
ctx_cc.drawImage(img1, x, y, 50, 50, 0, 0, 50, 50);
});
});
</script>
</body>
</html>
