Images Rendered to Canvas in Node Webkit are Blurry

When I try to load an image in my node webkit app with the following code:

var canvas  = document.getElementById('cytoBkg');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

var map = new Image();
map.src = './maps/map.jpg';

map.onload = function() {
    ctx.drawImage(map, 0, 0, map.width, map.height, 0, 0, canvas.width, canvas.height);
    console.log(map.width, map.height);
}

the image that is rendered to the canvas is very blurry. After about a minute, the following error comes up in the console:

[7583:7583:0519/153517.738479:ERROR:CONSOLE(0)] "Denying load of chrome-extension://dekacdafkimiiblogellomljhcemdaab/maps/map.jpg. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@691bdb490962d4e6ae7f25c6ab1fdd0faaf19cd0/&dockSide=undocked (0)

How can I make my image load properly? I have tried adding the image to as a web accessible resource in my package.json file, but this did not help.

via Jabbath