Having the classic blur issue but not finding a working solution

Question

So we all know the issue with shapes being drawn with a slightly blurred stroke. I was able to fix it without further problems when using plain js and canvas with following methods:

context.sRect=function(x,y,w,h){
x=parseInt(x)+0.50;
  y=parseInt(y)+0.50;  
  this.strokeRect(x,y,w,h);
}
context.fRect=function(x,y,w,h){
  x=parseInt(x);
  y=parseInt(y);
  context.fillRect(x,y,w,h);
}

However, when using easeljs stage, these methods dont have any impact at all and the shapes stay blurred. I also tried offsetting x and y as well as width and height by -.5 when using drawRect(); That didnt work either. The last thing I tried was setting stage.regX and stage.regY to -.5 which did change the output but only to an altered blur (slightly more blurry). Did I miss something?

PS: I need the canvas to always have the same width and height (200 * 200) but at the same time always fill the screen. I accomplish this by always setting canvas.width/height to 200 and the css of canvas to 100%.

Answer 1

Simple answer: you can't.

When you use CSS to scale a canvas, you can think of it as scaling each pixel on the canvas individually. Because of this, you are going to need to counteract the antialiasing of the browser itself.

To accurately counteract antialiasing in raster graphics, you always need more space than the container, simply because of the quantisation of information in pixels. If you do want your canvas to hold a fixed amount of information (200x200 pixels), this is not possible.

What you can still do is use that canvas as the model, but not the view ;)

If I did not want antialiasing of a fix-sized canvas over a variable space, I'd create another canvas whose size won't depend on the css, but on js events (look into window resize event listener and window.innerWidth, window.innerHeight), then draw the "model" original canvas on it while disabling ctx.imageSmoothingEnabled (= false), so that you'll get the needed result.

Here's a minimal example:

var canvasModel = document.createElement( 'canvas' ), // your current canvas
    canvas = document.getElementById( 'view-canvas' ), // displaying on the screen
    ctxModel = canvasModel.getContext( '2d' ),
    ctx = canvas.getContext( '2d' );

ctx.imageSmoothingEnabled = false;

// all of your stuff that you're currently doing goes here
...

// every time you update the 200x200 canvas, you do this:
ctx.drawImage( canvasModel, 0, 0, w, h );