EslasticStars

A fabric.js - Star + shadows demo. This demo compares the Kinetic.js stars demo with it's fabric.js converted counterpart. Needed to implement the Star object and geometries shadows.

by jrdiaz

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/all.min.js"></script>
<!DOCTYPE HTML>
<html>
    <head>
        <!--<script type="text/javascript" src="fabric/dist/all.js"></script>-->
        <!--<script type="text/javascript" src="star.class.js"></script>-->
        <!--<script type="text/javascript" src="elasticStars.js"></script>-->
    </head>
    <body onmousedown="return false;">
        <div id="container">
            <canvas id="c" width="578" height="363" style="border:1px solid #ccc"></canvas>
        </div>
    </body>
</html>

CSS

body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
            #tango {
                position: absolute;
                top: 10px;
                left: 10px;
                padding: 10px;
            }
            #container {
                background-image: url('http://www.html5canvastutorials.com/demos/assets/greenstars.jpg');
                display: inline-block;
                overflow: hidden;
                height: 365px;
                width: 580px;
            }

JavaScript

////////////////////////////////////////////////////
// fabric.js Modifications
////////////////////////////////////////////////////

////////////////////////////////////////////////////
// renderOnMove
/**
 * Indicates whether fabric.Canvas#add should re-render canvas when dragging an object.
 * Disabling this option could give a great performance boost when moving but relies on an external render loop
 */
fabric.StaticCanvas.prototype.renderOnMove = true; // #@#@#@#@# JRD

/**
  * Method that defines the actions when mouse is hovering the canvas.
  * The currentTransform parameter will definde whether the user is rotating/scaling/translating
  * an image or neither of them (only hovering). A group selection is also possible and would cancel
  * all any other type of action.
  * In case of an image transformation only the top canvas will be rendered.
  * @method __onMouseMove
  * @param e {Event} Event object fired on mousemove
  *
  */
fabric.StaticCanvas.prototype.__onMouseMove = function (e) {

  if (this.isDrawingMode) {
    if (this._isCurrentlyDrawing) {
      this._captureDrawingPath(e);
    }
    this.fire('mouse:move', { e: e });
    return;
  }

  var groupSelector = this._groupSelector;

  // We initially clicked in an empty area, so we draw a box for multiple selection.
  if (groupSelector !== null) {
    var pointer = getPointer(e);
    groupSelector.left = pointer.x - this._offset.left - groupSelector.ex;
    groupSelector.top = pointer.y - this._offset.top - groupSelector.ey;
    this.renderTop();
  }
  else if (!this._currentTransform) {

    // alias style to elimintate unnecessary lookup
    var style = this.upperCanvasEl.style;

    // Here we are hovering the canvas then we will determine
    // what part of the pictures we are hovering to change the caret symbol.
    // We won't do that while dragging or rotating in order to improve the
    // performance.
    var target = this.findTarget(e);

    if (!target) {
      // image/text was...