JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<canvas id="dessin" width="332" height="300" style="border:1px solid #ccc"></canvas>

JavaScript

/************************
******* clear img *******
*************************/
var moncanvas = document.getElementById('dessin');
var ctx = moncanvas.getContext('2d');

var img = new Image();
var img1 = new Image();
img.src = 'http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg';
img1.src = 'http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/grayscale.jpg';

img.onload = function() {
  ctx.save();
  // Cercle de coordoonnées 100,100
  ctx.beginPath();
  ctx.arc(100, 100, 150, 0, Math.PI * 2, false);
  ctx.closePath();
  // Clip sur le chemin courant
  //ctx.clip();
  // Dessin de l'image
  ctx.drawImage(img1, 0, 0);
  ctx.restore();
}

// Gestionnaire d'événement souris
moncanvas.onmousemove = function(e) {
  ctx.save();
  ctx.beginPath();
  // Cercle centré sur les coordonnées de la souris
  ctx.arc(e.offsetX, e.offsetY, 50, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.clip();
  // Dessin de l'image
  ctx.drawImage(img, 0, 0);
  ctx.restore();
}