CODEWITHSUNDEEP
javascripthtmlhtml5-canvasclient-sideeaseljs
user2553832
user2553832

Reputation: 87

Html5 canvas - I can't fill the inner of the shape with color using easeljs

I can't fill the inner of this pattern that I'm trying to draw (the red one..) The black shape on the background is just a dummy jpeg

http://s8.postimg.org/7rsho4mr9/shape.png

var stage = new createjs.Stage("shape");
stage.enableMouseOver();
stage.mouseMoveOutside = true;
createjs.Touch.enable(stage);

var width = $('#shape').width(),
border_width = 3,
part_border = 2 * border_width,
part_width = width / parts_num,
shape_width = part_width-part_border;

var container = new createjs.Container();

var shape = new createjs.Shape();
shape.x = 17;
shape.y = 0;
shape.name = 'morin1';
shape.graphics.setStrokeStyle(part_border);
shape.graphics.beginStroke("#f00");
shape.graphics.beginFill("yellow");


//top line
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(shape_width,0);

//bottom line
shape.graphics.moveTo(0, 174);
shape.graphics.lineTo(shape_width,174);

//left line - top part
shape.graphics.moveTo(0, 0);
shape.graphics.bezierCurveTo(30, 21, 13, 60, 0, 90);

//left line - bottom part
shape.graphics.bezierCurveTo(-18, 120, -24, 140, 0, 178);

//right line - top part
shape.graphics.moveTo(shape_width, 0);
shape.graphics.bezierCurveTo(shape_width+30, 21, shape_width+13, 60, shape_width+0, 90);

//right line - bottom part
shape.graphics.bezierCurveTo(shape_width-18, 120, shape_width-24, 140, shape_width, 178);

Upvotes: 0

Views: 758

Answers (1)

user2553832
user2553832

Reputation: 87

The problem was that I've used moveTo a lot, when I've changed the code and draw the shape without using moveTo it went great.

Upvotes: 1

Related Questions