HTML5 - Canvas, drawImage() draws image blurry

Question

I am trying to draw the following image to a canvas but it appears blurry despite defining the size of the canvas. As you can see below, the image is crisp and clear whereas

Answer 1

In addition to @canvas answer.

context.imageSmoothingEnabled = false;

Works perfect. But in my case changing size of canvas resetting this property back to true.

window.addEventListener('resize', function(e){
    context.imageSmoothingEnabled = false;
}, false)