EaselJS Image created as circle

Question

I'm struggling making an image in EaselJS become circular.

Basically, I'm looking for the CSS3 equivalent of border-radius in EaselJS and can't find the solution.

The closest I've gotten to this is creating a circle Shape, and adding a BitmapFill to it... the problem I'm seeing is that the BitmapFill is stuck at an (0, 0) x/y position behind the circle Shape, and when I move the Shape to anywhere outside the image size, the Bitmap doesn't follow (or snap) to the Shape and move with it.

---

Check my Fiddle here

If you change the Circle x position to 50, it looks normal'ish... but notice how moving the Circle away further from (50, 50) x/y position that the Bitmap gets left behind instead of following.

See below for how my HTML/CSS/Javascript look in the Fiddle:

HTML:

<!-- CreateJS CDN -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="stage-canvas" width="300" height="300">
  This web browser does not support canvas.
</canvas>

CSS:

canvas {
  background-color: #FFF;
  display: block;
}

Javascript:

// Self running function (once page loads)
(function(){
  // preload image assets first with preloadJS
  // used from example here: http://createjs.com/docs/preloadjs/modules/PreloadJS.html
  var queue = new createjs.LoadQueue();
  queue.on("complete", loaded, this);
  queue.loadManifest([
     {id: "poke", src:"https://upload.wikimedia.org/wikipedia/en/f/f1/Bulbasaur_pokemon_red.png"}
  ]);

  // once images above preloaded, run this function:
  function loaded() {
    // Init Stage
    var stage = new createjs.Stage("stage-canvas")

    // Create Background
    var bg1 = new createjs.Shape()
    bg1.graphics.beginFill("ghostwhite") // first bg is white
    bg1.graphics.drawRect(
      0,                    // x position
      0,                    // y position
      stage.canvas.width,   // width of shape (in px)
      stage.canvas.height   // height of shape (in px)
    )
    // Can only define this after shape is drawn, else no fill applies
    bg1.graphics.ef()    // short for endFill()
    stage.addChild(bg1)  // Add Child to Stage

    // trying to create image to be circlular
    // this will add it as the background-image to a circle
    // but I'm having problems getting it to "snap" to the circle
    // instead of stuck at (0, 0) x/y position behind circle...?
    var circle = new createjs.Shape()
    circle.graphics.beginBitmapFill(
      queue.getResult("poke"), // image to be used as fill
      "no-repeat" // image repeating or not
    )
    circle.graphics.drawCircle(
      150, // x position
      50, // y position
      50 // diameter (in px)
    )
    stage.addChild(circle)

    stage.update()
    }
})()

Thank you in advance to helping me figure out how to either fix my code, or if I'm on the wrong path here.

---

UPDATE: I originally asked this question for doing a circle image, or an image with rounded corners. I was really only needing the circle image approach, and since provided answers only targeted this, I've removed my question also asking for a rounded corners solution.

Answer 1

You can use the mask property (http://www.createjs.com/docs/easeljs/classes/Bitmap.html#property_mask) on a Bitmap to achieve rounded corners.

var stage = new createjs.Stage(document.getElementById('canvas'));

var img = new Image();
img.onload = function() {
    var container = new createjs.Container();

    var bitmap = new createjs.Bitmap(img);
    bitmap.regX = bitmap.regY = 150;
    bitmap.y = bitmap.x = 150;

    var maskShape = new createjs.Shape(new createjs.Graphics().f("#000").drawCircle(150,150,150));
    bitmap.mask = maskShape;

    container.addChild(bitmap);

    stage.addChild(container);
    stage.update();

    container.x = container.y = 50;

    stage.update();
};
img.src = '//unsplash.it/300/300';

https://jsfiddle.net/2tsym49r/3/

Edit: As mentioned by Lanny mask is using the Canvas clip method and thus won't be antialiased in Chrome (open bug). If you need antialiasing in Chrome you can do a workaround using compositeOperation, check the updated jsfiddle: https://jsfiddle.net/2tsym49r/4/