Search code examples
canvasdrawingantialiasingeaseljscreatejs

drawing on canvas with createjs is aliased


I have a problem with drawing on html5 canvas using the createjs library. The drawings are not smooth but aliased. It seems that many people have that issue just with chrome but for me it's not different in IE and firefox either. I also found that it should be possible to use alphamaskfilter to achieve anti-aliasing but I don't know how. If that's the way to go can someone tell me how to do that?

Here is part of the code. It's using the mouse-movement and paints a line from where the mouse was before to where the mouse is now:

var drawing = new createjs.Shape();
drawing.name = pathID.toString();
drawing.graphics.ss(point.width, "round").s(point.color);
drawing.graphics.mt(lastPoint.x, lastPoint.y);        
drawing.graphics.lt(point.x, point.y);

// Draw onto the canvas, and then update the container cache.
wrapper.addChild(drawing);
wrapper.updateCache("source-over");

Solution

  • I found the solution. Strangely, it gets smooth if you give no argument to wrapper.updateCache() like so:

    var drawing = new createjs.Shape();
    drawing.name = pathID.toString();
    drawing.graphics.ss(point.width, "round").s(point.color);
    drawing.graphics.mt(lastPoint.x, lastPoint.y);        
    drawing.graphics.lt(point.x, point.y);
    
    // Draw onto the canvas, and then update the container cache.
    wrapper.addChild(drawing);
    wrapper.updateCache();