API tools faq
paste
Advertisement
Guest User

How do I erase an image on html5 canvas

a guest
Sep 5th, 2013
312
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.22 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  4. <title>EaselJS: AlphaMaskFilter Reveal Demo</title>
  5.  
  6. <link href="css/demoStyles.css" rel="stylesheet" type="text/css" />
  7. <style>
  8.     BODY {
  9.         -webkit-user-select: none;  /* Chrome all / Safari all */
  10.       -moz-user-select: none;     /* Firefox all */
  11.       -ms-user-select: none;      /* IE 10+ */
  12.  
  13.       /* No support for these yet, use at own risk */
  14.       -o-user-select: none;
  15.       user-select: none;
  16.     }
  17. </style>
  18.  
  19. <script type="text/javascript" src="src/easeljs/events/EventDispatcher.js"></script>
  20. <script type="text/javascript" src="src/easeljs/utils/UID.js"></script>
  21. <script type="text/javascript" src="src/easeljs/geom/Matrix2D.js"></script>
  22. <script type="text/javascript" src="src/easeljs/display/DisplayObject.js"></script>
  23. <script type="text/javascript" src="src/easeljs/display/Container.js"></script>
  24. <script type="text/javascript" src="src/easeljs/display/Stage.js"></script>
  25. <script type="text/javascript" src="src/easeljs/events/MouseEvent.js"></script>
  26. <script type="text/javascript" src="src/easeljs/display/Shape.js"></script>
  27. <script type="text/javascript" src="src/easeljs/display/Graphics.js"></script>
  28. <script type="text/javascript" src="src/easeljs/display/Text.js"></script>
  29. <script type="text/javascript" src="src/easeljs/geom/Point.js"></script>
  30. <script type="text/javascript" src="src/easeljs/display/Bitmap.js"></script>
  31. <script type="text/javascript" src="src/easeljs/filters/Filter.js"></script>
  32. <script type="text/javascript" src="src/easeljs/ui/Touch.js"></script>
  33.  
  34. <script type="text/javascript" src="src/easeljs/filters/AlphaMaskFilter.js"></script>
  35. <script type="text/javascript" src="src/easeljs/filters/BoxBlurFilter.js"></script>
  36.  
  37.  
  38. <script>
  39.  
  40.     var stage;
  41.     var isDrawing;
  42.     var drawingCanvas;
  43.     var oldPt;
  44.     var oldMidPt;
  45.     var displayCanvas;
  46.     var image;
  47.     var bitmap;
  48.     var maskFilter;
  49.     var cursor;
  50.     var text;
  51.     var blur;
  52.  
  53.     function init() {
  54.         if (window.top != window) {
  55.             document.getElementById("header").style.display = "none";
  56.         }
  57.  
  58.         document.getElementById("loader").className = "loader";
  59.  
  60.         image = new Image();
  61.         image.onload = handleComplete;
  62.         image.src = "images/summer.jpg";
  63.  
  64.         stage = new createjs.Stage("testCanvas");
  65.         text = new createjs.Text("Loading...", "20px Arial", "#999999");
  66.                 text.set({x:stage.canvas.width/2, y:stage.canvas.height-80});
  67.         text.textAlign = "center";
  68.     }
  69.  
  70.     function handleComplete() {
  71.         document.getElementById("loader").className = "";
  72.         createjs.Touch.enable(stage);
  73.         stage.enableMouseOver();
  74.  
  75.         stage.addEventListener("stagemousedown", handleMouseDown);
  76.         stage.addEventListener("stagemouseup", handleMouseUp);
  77.         stage.addEventListener("stagemousemove", handleMouseMove);
  78.         drawingCanvas = new createjs.Shape();
  79.         bitmap = new createjs.Bitmap(image);
  80.  
  81.         blur = new createjs.Bitmap(image);
  82.         blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
  83.         blur.cache(0,0,960,400);
  84.         blur.alpha = .5;
  85.  
  86.         text.text = "Click and Drag to Reveal the Image.";
  87.  
  88.         stage.addChild(blur, text, bitmap);
  89.         updateCacheImage(false);
  90.  
  91.         cursor = new createjs.Shape(new     createjs.Graphics().beginFill("#FFFFFF").drawCircle(0,0,20));
  92.         cursor.cursor = "pointer";
  93.  
  94.         stage.addChild(cursor);
  95.     }
  96.  
  97.     function handleMouseDown(event) {
  98.         oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
  99.         oldMidPt = oldPt;
  100.  
  101.         isDrawing = true;
  102.     }
  103.  
  104.     function handleMouseMove(event) {
  105.         cursor.x = stage.mouseX;
  106.         cursor.y = stage.mouseY;
  107.  
  108.         if (!isDrawing) {
  109.             stage.update();
  110.             return;
  111.         }
  112.  
  113.         var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
  114.  
  115.                 drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
  116.                     .beginStroke("rgba(0,0,0,0.15)")
  117.                     .moveTo(midPoint.x, midPoint.y)
  118.                     .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
  119.  
  120.         oldPt.x = stage.mouseX;
  121.         oldPt.y = stage.mouseY;
  122.  
  123.         oldMidPt.x = midPoint.x;
  124.         oldMidPt.y = midPoint.y;
  125.  
  126.         updateCacheImage(true);
  127.  
  128.     }
  129.  
  130.     function handleMouseUp(event) {
  131.         updateCacheImage(true);
  132.         isDrawing = false;
  133.     }
  134.  
  135.     function updateCacheImage(update) {
  136.         if (update) {
  137.             drawingCanvas.updateCache(0, 0, image.width, image.height);
  138.         } else {
  139.             drawingCanvas.cache(0, 0, image.width, image.height);
  140.         }
  141.  
  142.         maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);
  143.  
  144.         bitmap.filters = [maskFilter];
  145.         if (update) {
  146.             bitmap.updateCache(0, 0, image.width, image.height);
  147.         } else {
  148.             bitmap.cache(0, 0, image.width, image.height);
  149.         }
  150.  
  151.         stage.update();
  152.     }
  153. </script>
  154.  
  155. </head>
  156.  
  157. <body onload="init();">
  158. <header id="header" class="EaselJS">
  159.  
  160. <div id="loader"></div>
  161. <canvas id="testCanvas" width="960" height="400"></canvas>
  162. </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!