JavaScript HTML5 Canvas the way to delete a block area in the canvas _javascript tips

The example in this article describes how to delete a block area in the HTML5 canvas canvas. Share to everyone for your reference, specific as follows:

The screenshot of the running effect is as follows:

Attached: The black small square is the deleted block area in the picture

The specific code is as follows:

Index.html:

<! DOCTYPE html>
 
 

Canvas.js:

(function () {var dyl = {cache: {}};
    Dyl.setcontext = function (context) {Dyl.cache._context = context;
  return context;
  };
  Dyl.getdom = function (ID) {return document.getElementById (ID);
  };
  Dyl._getcontext = function () {return dyl.cache._context;
  };
    Dyl.save = function () {var context = Dyl._getcontext (); The context?
  Context.save (): void (0);
  };
    Dyl.restore = function () {var context = Dyl._getcontext (); The context?
  Context.restore (): void (0);
  };
    Dyl.createcontext = function (canvasid) {var canvas = This.getdom (CANVASID);
    if (!canvas) {return null;
  Return Dyl.setcontext (Canvas.getcontext ("2d"));
  };
    Dyl.createcolor = function () {var color = ' rgb (';
    Color + = Math.Round (Math.random () *255);
    Color + + ",";
    Color + = Math.Round (Math.random () *255);
    Color + + ",";
    Color + = Math.Round (Math.random () *255);
    color = ")";
  return color;
  }; dyl.addimg = function (img, x, y) {var context = Dyl._getcontext ();
    if (!img | |!context) {return;
      } if (typeof img = = "string") {var oimg = new Image ();
      OIMG.SRC = img;
      Oimg.onload = function () {context.drawimage (oimg, x, y);
    } return;
  Context.drawimage (IMG, x, y);
  };
    Dyl.rect = function (color, x, y, width, height, alpha) {var context = Dyl._getcontext ();
    if (!context) {return;
    } context.save ();
    Context.fillstyle = color; Context.globalalpha = Alpha?
    alpha:1;
    Context.fillrect (x, y, width, height);
  Context.restore ();
  };
    dyl.circle = function (color, x, Y, R, Alpha) {var context = Dyl._getcontext ();
    Context.save ();
    Context.fillstyle = color;
    Context.beginpath (); Context.globalalpha = Alpha?
    alpha:1;
    Context.arc (x, y, R, 0, 2*math.pi);
    Context.fill ();
  Context.stroke ();
  };
    Dyl.clearrect = function (x, y, width, height) {var context = Dyl._getcontext (); if (!context){return;
  } context.clearrect (x, y, width, height);
  };
    Dyl.scale = function (x, y) {var context = Dyl._getcontext ();
    if (!context) {return; x = x?
    X:1; y = y?
    Y:1;
  Context.scale (x, y);
  };
  if (!window.dyl) {window.dyl = Dyl;

 }
})();

I hope this article will help you with your JavaScript programming.