Draw cross using KineticJS

by pronebird

HTML

<script src="//cdn.jsdelivr.net/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="stage"></div>

CSS

body { background: #fac; }

JavaScript

Kinetic.Cross = function(config) {
		this.___init(config);
	};
	Kinetic.Cross.prototype = {
		___init: function(config) {
			// call super constructor
			Kinetic.Shape.call(this, config);
			this.className = 'Cross';
			this.sceneFunc(this._sceneFunc);
			this.hitFunc(this._hitFunc);
		},
		_sceneFunc: function(context) {
			var radius = this.radius();
			var thickness = radius * 0.3;
			var lineOffset = radius * 0.4;

			context.save();

			context.beginPath();
			context.arc(0, 0, radius, 0, Math.PI * 2, true);
			context.closePath();
			context.fillStrokeShape(this);

			context.beginPath();
			context.rotate(Math.PI/4);
			context.rect(-radius + lineOffset, thickness * -0.5, radius * 2 - lineOffset * 2, thickness);
			context.rotate(Math.PI / 2);
			context.rect(-radius + lineOffset, thickness * -0.5, radius * 2 - lineOffset * 2, thickness);
			context.closePath();

			if(this.mask()) {
				context.setAttr('globalCompositeOperation', 'destination-out');
				context.fillShape(this);
			} else {
				context.setAttr('fillStyle', this.color());
				context.fill();
			}

			context.restore();
		},
		_hitFunc: function(context) {
			context.beginPath();
			context.arc(0, 0, this.radius(), 0, Math.PI * 2, true);
			context.closePath();
			context.fillStrokeShape(this);
		}
	};
	Kinetic.Util.extend(Kinetic.Cross, Kinetic.Shape);
	Kinetic.Factory.addGetterSetter(Kinetic.Cross, 'radius', 0);
	Kinetic.Factory.addGetterSetter(Kinetic.Cross, 'color', 'white');
	Kinetic.Factory.addGetterSetter(Kinetic.Cross, 'mask', false);

var stage = new Kinetic.Stage({
    container: 'stage', 
    width: 300, 
    height: 300
});
var layer = new Kinetic.Layer();
var cross = new Kinetic.Cross({
    x: 100,
    y: 100,
    radius: 60,
    color: '#fff',
    mask: false,
    fill: '#663399'
});

var group = new Kinetic.Group({
    x: 100, y: 100,
    draggable: true
});
group.add(cross);

stage.add(layer);
layer.add(group);

stage.draw();