I try to make a game with nodeJS in Back-end and AngularJS in Front-End but i have some problems. I use express to configure routes in NodeJS and ngRoute in AngularJS. Each page have a view and a controller. I have a page who just has a "canvas" into its view and a controller to manage the canvas (this code is an example, it's not my final code) :
gameView.html :
<canvas id="gameCanvas" width="500" height="500"></canvas>
gameCtrl.js :
app.controller('gameCtrl', function($scope) {
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
}
img.src = 'image.png';
});
The problem is that in Google Chrome and only with NodeJS (i already tried with Apache), after X refresh, the drawImage doesn't work.
I already have disabled the GPU acceleration of Chrome or used the "document.createElement("img")". But nothing work.
In NodeJS, i have defined a public folder like that :
app.use(express.static(__dirname + '/public'));
And the image, html and js files are in the public folder. So, i don't know why it doesn't work.
If you have any idea thanks to give me a feedback.
(I am sorry for my english, i am french)
EDIT : I have created a workspace at Cloud9 website.
To test : https://testcanvas-c9-lludol.c9.io/
To see the code : https://ide.c9.io/lludol/testcanvas
Like you can see, it works ! I even have tried to reproduce the route system in this workspace.
So, do you think it's my server who have a problem ?
Or do you think there is a problem my nodeJS configuration ?
I found a solution : Instead of creating an image with "new Image()", i can store the base64 encoded of the image and display it directly with "drawImage".