Images Rendered to Canvas in Node Webkit are Blurry

Question

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.

Answer 1

This issue seems to arise when you set the height and width of the canvas in it's style attribute before drawing the image on the canvas. In the above example, the issue can be remedied by setting:

canvas.width = map.width;
canvas.height = map.height;

after the image's onload event, and removing any css related to the height or width of your canvas.