JSFiddle - React, Tailwind, and code Playground

by Mubasshir Pawle

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>EaselJS Example: Mask test file.</title>

    <link href="https://raw.githubusercontent.com/CreateJS/EaselJS/master/_assets/css/shared.css" rel="stylesheet" type="text/css" />
    <link href="https://raw.githubusercontent.com/CreateJS/EaselJS/master/_assets/css/examples.css" rel="stylesheet" type="text/css" />
    <script src="https://raw.githubusercontent.com/CreateJS/EaselJS/master/_assets/js/examples.js"></script>

    <script src="https://raw.githubusercontent.com/CreateJS/EaselJS/master/lib/easeljs-NEXT.js"></script>
    <!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script id="editable">
      var img, star, stage;
      var scale;
      var angle;

      function init() {
        examples.showDistractor();

        //wait for the image to load
        img = new Image();
        img.onload = handleImageLoad;
        img.src = "https://raw.githubusercontent.com/CreateJS/EaselJS/master/_assets/art/flowers.jpg";
        angle = 0;
      }

      function handleImageLoad() {
        examples.hideDistractor();

        //find canvas and load images, wait for last image to load
        var canvas = document.getElementById("testCanvas");

        // create a new stage and point it at our canvas:
        stage = new createjs.Stage(canvas);

        // masks can only be shapes.
        star = new createjs.Shape();
        // the mask's position will be relative to the parent of its target:
        star.x = img.width / 2;
        star.y = img.height / 2;
        // only the drawPolyStar call is needed for the mask to work:
        star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0, 0, img.height / 2 - 15, 5, 0.6).closePath();

        var bg = new createjs.Bitmap(img);
        // blur and desaturate the background image:
        bg.filters = [new createjs.BlurFilter(2, 2, 2), new...

JavaScript

/**
 * Very minimal shared code for examples.
 */

(function() {
	if (document.body) { setupEmbed(); }
	else { document.addEventListener("DOMContentLoaded", setupEmbed); }
	
	function setupEmbed() {
		if (window.top != window) {
			document.body.className += " embedded";
		}
	}
	
	var o = window.examples = {};
	o.showDistractor = function(id) {
		var div = id ? document.getElementById(id) : document.querySelector("div canvas").parentNode;
		div.className += " loading";
	};
	
	o.hideDistractor = function() {
		var div = document.querySelector(".loading");
		div.className = div.className.replace(/\bloading\b/);
	};
})();