Erasing Parts of an Image on HTML5 Canvas?

Question

I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. On a blank canvas I dram an image as shown in the figure below. Now I want to create a circle Shape which can be used to erase parts of the image. The red circle in the image is the eraser.

How can I erase parts of an Image on HTML5 Canvas?

Answer 1

You can use Compositing to "erase" pixels.

Specifically you use destination-out compositing.

KineticJS does not support compositing, but you still have a couple of options:

(Note: KineticJS has become KonvaJS and I haven't checked whether KonvaJs supports compositing. If it now does, just use destination-out compositing inside KonvaJS)

Option#1: Use a native canvas element as your Kinetic.Image source

• Create an in-memory html5 canvas using var c=document.createElement,

• Resize the canvas to image size,

• drawImage your image onto the canvas,

• Create a Kinetic.Image and set its image property to a reference to the native canvas. The Kinetic.Image will display whatever is drawn onto the native canvas.

  var kImage=new Kinetic.Image({
  ...
  image:c,
  ...
  

• Set the canvas Compositing to cause new drawings to "erase" existing pixels:

  c.globalCompositeOperation='destination-out';
  

• Listen for drag events on your circle-eraser. Use those events to draw a circle on the canvas that move just like the Kinetic circle-eraser moves. Since the canvas's compositing is set to "erase", new drawings of the circle on the canvas will erase the image on the canvas.

Your Kinetic.Image exactly reflects its canvas source (var c), so your Kinetic.Image will also display the image being erased in response to the Kinetic circle-eraser movements.

Option#2: Use a Kinetic.Shape

You can do the same operation as Option#1 by creating a Kinetic.Shape on a separate layer and getting a reference to the native canvas context using:

var ctx = myShapeLayer.getContext()._context;

This is a weaker option because KineticJS will redraw the shape--causing your erasing to be undone. Therefore you must do the additional step of saving all your circle-eraser's movements and replaying those movements (in drawFunc) to redo your erasing.