Question: I am developing a web app that uses canvas to diagram org charts and I've using bootstrap 2.3 without problems. Some days ago I upgraded to bootstrap 3 and I now see a blur on my canvas. Let the images talk:

![With Bootstrap 3](https://i.stack.imgur.com/md2JH.png) <- With Bootstrap 3

![Without Bootstrap 3](https://i.stack.imgur.com/QTbmu.png) <- Without Bootstrap 3

I don't really want to downgrade, because it is not trivial and because I like the new version, but **how can I know where the problem is? Is there a way to tell the css applied to the canvas elements?** They are managed in backstage by a third-party, compiled js library.

Thanks!

Answer: 
You can check the canvas' property `className` to see if a class is set:

```
var canvas = document.getElementById('myCanvas);

if (canvas.className.length > 0) alert('CSS class set');

```

or you can request properties and compare them (something like this):

```
var w = canvas.style.getPropertyValue('width')||0,
    h = canvas.style.getPropertyValue('height')||0;

if (w > 0 && w !== canvas.width) canvas.width = w;
if (h > 0 && h !== canvas.height) canvas.height = h;

```

CSS will affect the canvas if interpolation is active (default) and CSS dimension differ from canvas' actual dimension - just like it does with images.

So perhaps there is some box-sizing going on with the boot-strap active combined with padding/border or some other style which affects the size a little and therefor activates interpolation/sub-pixeling.
Thanks to @ken-abdias-software on a comment I looked into css properties and notice box-sizing applied as border-box to any tag with bootstrap 3.

I changed it and now the canvas is perfectly rendered.

```
canvas{
  box-sizing: content-box;
}

```